整理iconify在React、Preact、NextJs、Vue3、Vue2、Nuxt2、Nuxt3、Svelte、Html的一键式离线图标部署使用示例
## 🤔 开发初衷 - 图标在前端开发中是必不可少的需求，有时候我们会为找一些图标浪费很多时间，而且可能需要安装引入各种图标库才能满足需要，为了解决这个烦恼，我寻找了很多方案，最终找到了 [iconify](https://iconify.design/) 这个强大的图标库集合。我也研究了下`iconify`图标库作者 [cyberalien](https://github.com/cyberalien) ，发现这位外国友人是真专一呀，从2017年创建`iconify`一直维护至今。下面我们介绍下`iconify`的特性。 ## ✨ 特性 - **统一的图标框架**: 超过`100`个图标集 [Browse icons](https://icon-sets.iconify.design/) 都集中到这一个库。超过`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](https://docs.iconify.design/iconify-icon/) - **持续维护，可靠度高**: 维护的作者对 [issues](https://github.com/iconify/iconify/issues) `响应很快`，`活跃度高`，所有图标都经过`验证`、`清理`、`优化`和`定期更新` - **对设计师友好**: 提供了`Iconify`插件，可直接导入到 [Figma](https://www.figma.com/)，具体看 [iconify-design-figma](https://docs.iconify.design/design/figma/)，当然也提供了导入 [Sketch](https://www.sketch.com/home/) 的方法，具体看 [iconify-design-sketch](https://docs.iconify.design/design/sketch/) - **完全免费**: 集中的图标都具有`开源许可`，也就是基本可以`商用` ## 🫶 `iconify`生态 - 图标查找器：目前可以使用 [icones](https://icones.js.org/) 可视化图标查找器，提高开发效率，当然后面`cyberalien`会出一款官方的查找器 [icon-finder](https://docs.iconify.design/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`并支持离线部署 [教程地址](https://www.bilibili.com/video/BV17S4y1J79d/?vd_source=5a992808de6229d78e7810536c5f9ab3) ## ❤️🔥 捐赠（微信） 收集整理不易，如果您觉得这个项目对您有帮助，可以帮作者买个雪糕🥷 🍦 表示支持，当然一个小小的 `star`，也是对我莫大的支持哦