Iconify Offline Arrange
整理iconify在React、Preact、NextJs、Vue3、Vue2、Nuxt2、Nuxt3、SvelteJS、Html的一键式离线图标部署和使用示例
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，也是对我莫大的支持哦
许可证
