Skip to content

Commit

Permalink
Update README.md
Browse files Browse the repository at this point in the history
  • Loading branch information
yoon-jisung authored May 11, 2024
1 parent b4b8b9d commit be2e369
Showing 1 changed file with 31 additions and 8 deletions.
39 changes: 31 additions & 8 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,15 +1,38 @@
# SVG2Fontify

## 🚨 문제 정의
리액트에서 SVG를 가져오는 방법 중 많이 쓰이는 방법인 `SVG-in-JS` 방법은 사실 성능적으로 좋지 않습니다.
svg는 자바스크립트가 아니라 이미지를 나타내는 html과 유사한 xml태그로, SVG 코드를 자바스크립트 번들 안에 넣게 된다면 파싱과 컴파일 과정을 거치게 되어 자바스크립트 엔진이 소스코드를 처리하는 시간을 더 오래 걸리게 되는데요, 이러한 문제를 해결하기 위해 `<img />`를 사용하거나, SVG에 `use`를 사용하는 방법을 쓰거나,`IconFont`로 변환하여 사용하는 방법들이 있습니다. 
[![Maintenance](https://img.shields.io/badge/Maintained%3F-yes-green.svg)](https://github.com/abdelhakimrafik/icon2font/graphs/commit-activity)
[![GitHub license](https://img.shields.io/github/license/Naereen/StrapDown.js.svg)](https://github.com/abdelhakimrafik/icon2font/blob/master/LICENSE)
[![TypeScript](https://badgen.net/badge/icon/typescript?icon=typescript&label)](https://typescriptlang.org)
[![Open Source? Yes!](https://badgen.net/badge/Open%20Source%20%3F/Yes%21/blue?icon=github)](https://github.com/abdelhakimrafik/icon2font/)

이중 `IconFont`를 사용하는 방법을 택하였을 때
1) Figma에서 디자이너가 작업한 SVG를 코드화하여 저장하고,
2) Iconfont로 변환해 주는 서비스를 이용하여 ,
3) 다시 작업 폴더에 저장하는 과정들은 꽤나 번거롭고 시간적인 비용이 드는 작업입니다.
Figma plugin to easily export icons to font and output a TTF/EOT/WOFF/SVG/CSS/SASS/TSX

#### Features:

- Supported font formats: `WOFF`, `WOFF2`, `EOT`, `TTF` and `SVG`
- Support Vue & `React` & `TypeScript`
- Support `Css`
- Provide `HTML Demo`
- Exports `Json` file for extra reuse
- Support custom `Fontname`, `Prefix`, `Suffix`
- Automatically generate a preview site

## Usage

1. Install Figma Plugin `SVG2Fontify`
1. Select icons to be exported
1. Run the plugin under plugins section
1. Fill inputs if needed (`Fontname`, `Prefix`, `Suffix`, `Delimiter`) [Optional]
1. Click `Generate`

## Contributors

This project exists thanks to all the people who contribute.

## License

Licensed under the [MIT License](https://opensource.org/licenses/MIT).

저희는 이러한 문제를 해결하고자 Figma에서 선택한 SVG들을 바로 Iconfont로 변환하여 저장하여 사용할 수 있는 Figma 플러그인을 개발하여 생산성을 높이고자 했습니다. 

## 🧩 요구사항 명세
![image](https://hackmd.io/_uploads/rJOTrGEg0.png)
Expand Down

0 comments on commit be2e369

Please sign in to comment.