diff --git a/README.md b/README.md index b659f12..585bae5 100644 --- a/README.md +++ b/README.md @@ -1,25 +1,33 @@ -# SVG2Fontify +# ![material-symbols_image](https://github.com/svg2fontTeam/SVG2Fontify/assets/77870077/794dcee4-a554-49e2-b15e-325ef728dc1c) SVG2Fontify -## ๐Ÿšจ ๋ฌธ์ œ ์ •์˜ -๋ฆฌ์•กํŠธ์—์„œ SVG๋ฅผ ๊ฐ€์ ธ์˜ค๋Š” ๋ฐฉ๋ฒ• ์ค‘ ๋งŽ์ด ์“ฐ์ด๋Š” ๋ฐฉ๋ฒ•์ธ `SVG-in-JS` ๋ฐฉ๋ฒ•์€ ์‚ฌ์‹ค ์„ฑ๋Šฅ์ ์œผ๋กœ ์ข‹์ง€ ์•Š์Šต๋‹ˆ๋‹ค. -svg๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๊ฐ€ ์•„๋‹ˆ๋ผ ์ด๋ฏธ์ง€๋ฅผ ๋‚˜ํƒ€๋‚ด๋Š” html๊ณผ ์œ ์‚ฌํ•œ xmlํƒœ๊ทธ๋กœ, SVG ์ฝ”๋“œ๋ฅผ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ฒˆ๋“ค ์•ˆ์— ๋„ฃ๊ฒŒ ๋œ๋‹ค๋ฉด ํŒŒ์‹ฑ๊ณผ ์ปดํŒŒ์ผ ๊ณผ์ •์„ ๊ฑฐ์น˜๊ฒŒ ๋˜์–ด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์—”์ง„์ด ์†Œ์Šค์ฝ”๋“œ๋ฅผ ์ฒ˜๋ฆฌํ•˜๋Š” ์‹œ๊ฐ„์„ ๋” ์˜ค๋ž˜ ๊ฑธ๋ฆฌ๊ฒŒ ๋˜๋Š”๋ฐ์š”, ์ด๋Ÿฌํ•œ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด ``๋ฅผ ์‚ฌ์šฉํ•˜๊ฑฐ๋‚˜, SVG์— `use`๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์“ฐ๊ฑฐ๋‚˜,`IconFont`๋กœ ๋ณ€ํ™˜ํ•˜์—ฌ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•๋“ค์ด ์žˆ์Šต๋‹ˆ๋‹ค.ย  +[![Maintenance](https://img.shields.io/badge/-ReactJs-61DAFB?logo=react&logoColor=white&style=flat)](https://react.dev) +[![Maintenance](https://img.shields.io/badge/-Vue.js-4fc08d?style=flat&logo=vuedotjs&logoColor=white)](https://ko.vuejs.org/) +[![GitHub license](https://badgen.net/static/license/MIT/blue)](https://github.com/svg2fontTeam/SVG2Fontify/blob/trunk/LICENSE.txt) +[![TypeScript](https://badgen.net/badge/icon/typescript?icon=typescript&label)](https://typescriptlang.org) -์ด์ค‘ `IconFont`๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ํƒํ•˜์˜€์„ ๋•Œ -1) Figma์—์„œ ๋””์ž์ด๋„ˆ๊ฐ€ ์ž‘์—…ํ•œ SVG๋ฅผ ์ฝ”๋“œํ™”ํ•˜์—ฌ ์ €์žฅํ•˜๊ณ , -2) Iconfont๋กœ ๋ณ€ํ™˜ํ•ด ์ฃผ๋Š” ์„œ๋น„์Šค๋ฅผ ์ด์šฉํ•˜์—ฌ , -3) ๋‹ค์‹œ ์ž‘์—… ํด๋”์— ์ €์žฅํ•˜๋Š” ๊ณผ์ •๋“ค์€ ๊ฝค๋‚˜ ๋ฒˆ๊ฑฐ๋กญ๊ณ  ์‹œ๊ฐ„์ ์ธ ๋น„์šฉ์ด ๋“œ๋Š” ์ž‘์—…์ž…๋‹ˆ๋‹ค. +Figma plugin to easily export icons to font and output a TTF/EOT/WOFF/SVG/CSS/TSX -์ €ํฌ๋Š” ์ด๋Ÿฌํ•œ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๊ณ ์ž Figma์—์„œ ์„ ํƒํ•œ SVG๋“ค์„ ๋ฐ”๋กœ Iconfont๋กœ ๋ณ€ํ™˜ํ•˜์—ฌ ์ €์žฅํ•˜์—ฌ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” Figma ํ”Œ๋Ÿฌ๊ทธ์ธ์„ ๊ฐœ๋ฐœํ•˜์—ฌ ์ƒ์‚ฐ์„ฑ์„ ๋†’์ด๊ณ ์ž ํ–ˆ์Šต๋‹ˆ๋‹ค.ย  +### Features -## ๐Ÿงฉ ์š”๊ตฌ์‚ฌํ•ญ ๋ช…์„ธ -![image](https://hackmd.io/_uploads/rJOTrGEg0.png) -![image](https://hackmd.io/_uploads/rJpGifNgA.png) +- **Supported Font Formats:** `WOFF`, `EOT`, `TTF`, `SVG` +- **Framework Support:** Vue, React, TypeScript +- **CSS Support** +- **Customization:** Fontname, Prefix, Suffix, Version +- **Additional Tools:** Preview site HTML file provided +### Usage -## ๐Ÿ—“๏ธ ์ผ์ • -![image](https://hackmd.io/_uploads/SkqOx7EgA.png) -![image](https://hackmd.io/_uploads/BJQklmNxA.png) +1. **Install:** Download and install the Figma Plugin `SVG2Fontify`. +2. **Selection:** Select icons that you wish to export. +3. **Activation:** Access the plugin via the plugins section and run it. +4. **Configuration:** (Optional) Configure settings like `Fontname`, `Prefix`, `Suffix`, `Version`. +5. **Framework Specifics:** (Optional) Specify framework integration settings for `React` or `Vue`. +6. **Generate:** Click on `Generate` to create your custom fonts. -## ๐Ÿ“ ์ฐธ๊ณ  ์ž๋ฃŒ -[Breaking Up with SVG-in-JS in 2023](https://kurtextrem.de/posts/svg-in-js) -[React ๊ฐœ๋ฐœ์ž๋ฅผ ์œ„ํ•œ ํ”ผ๊ทธ๋งˆ ํ”Œ๋Ÿฌ๊ทธ์ธ ๊ฐœ๋ฐœ(feat. ์˜จ๋ณด๋”ฉ)](https://techblog.woowahan.com/8339/) +### Contributors + +A heartfelt thank you to all the individuals whose contributions make this project possible. + +### License + +This project is proudly licensed under the [MIT License](https://opensource.org/licenses/MIT).