iconify-offline-arrange

整理iconify在React、Preact、NextJs、Vue3、Vue2、Nuxt2、Nuxt3、Svelte、Html的一键式离线图标部署使用示例

🤔 开发初衷

• 图标在前端开发中是必不可少的需求，有时候我们会为找一些图标浪费很多时间，而且可能需要安装引入各种图标库才能满足需要，为了解决这个烦恼，我寻找了很多方案，最终找到了 iconify 这个强大的图标库集合。我也研究了下iconify图标库作者 cyberalien ，发现这位外国友人是真专一呀，从2017年创建iconify一直维护至今。下面我们介绍下iconify的特性。

✨ 特性

• 统一的图标框架: 超过100个图标集 Browse icons 都集中到这一个库。超过100,000+个开源矢量图标
• Web Component: 既可以在HTML中使用，无需任何UI框架，又适用于所有支持Web组件的现代框架（React、Preact、NextJs、Vue3、Vue2、Nuxt2、Nuxt3、Svelte、Html ...）
• 丰富的Api: 支持属性icon、mode、inline、width、height、flip、rotate，还有一些有用的方法等，具体可看 Iconify Icon web component
• 持续维护，可靠度高: 维护的作者对 issues 响应很快，活跃度高，所有图标都经过验证、清理、优化和定期更新
• 对设计师友好: 提供了Iconify插件，可直接导入到 Figma，具体看 iconify-design-figma，当然也提供了导入 Sketch 的方法，具体看 iconify-design-sketch
• 完全免费: 集中的图标都具有开源许可，也就是基本可以商用

🫶 iconify生态

• 图标查找器：目前可以使用 icones 可视化图标查找器，提高开发效率，当然后面cyberalien会出一款官方的查找器 icon-finder
• VsCode插件：Iconify IntelliSense，在编辑器里直接显示图标

🚀 安装、启动项目

• 安装依赖，在项目的根目录先执行npm install命令，然后再执行npm run bootstrap命令，这样项目的所有依赖就会全部安装
• 启动项目，在项目的根目录先执行npm run start命令，该命令是用来开启离线图标服务的，然后再对应执行您想看项目的命令，比如这里我想看vue3的示例，执行npm run dev:vue3命令即可

📺 视频教程（存放于bilibili）

• ① 了解iconify图标框架
• ② 工程师如何在web中使用iconify
• ③ 设计师如何使用iconify
• ④ 如何离线部署iconify，为公司提供一个统一的内部图标库
• ⑤ 如何将自定义图标加入iconify并支持离线部署

教程地址

❤️‍🔥 捐赠（微信）

收集整理不易，如果您觉得这个项目对您有帮助，可以帮作者买个雪糕🥷 🍦 表示支持，当然一个小小的 star，也是对我莫大的支持哦

许可证

MIT © xiaoxian521-2022