🎉喜欢 Heroicons？这里有一个优秀的 Heroicons for ❤️Vue.js 组件！

一个免费使用 MIT 开源协议开源的高质量 SVGs Vue 组件图标库！

• 100% 无其他项目依赖

• 100% 兼容 CDN 安装的 Vue.js 使用

  前言

  我很喜欢 Heroicons，因为确实设计的很精致。起初是从 https://heroicons.dev/ 网站直接获取 SVG 代码写入到项目中，后来发现真的很不方便！找了一圈 Heroicons for Vue.js 的包。就说一点。那个包做的真心不咋样。估计自己都没用。

• 文档网站：https://bytegem.github.io/vue-heroicons/

• GitHub 仓库：https://github.com/bytegem/vue-heroicons

  安装

• Npm：npm i @bytegem/vue-heroicons -S

• Yarn: yarn add @bytegem/vue-heroicons

  注册 Vue Components

  import Vue from 'vue';
  import Heroicons from '@bytegem/vue-heroicons';
  Vue.use(Heroicons);

  使用

  <HeroIconAdjustmentsOutline />
  <hero-icon-adjustments-outline />

  驼峰命名和中横线命名都可以，反正 Vue.js 自己处理了👻

  其他

  Heroicons 有 150 个两种风格的图标，分别是 24px 的 Outline 风格和 20px 的 Solid 风格

  你可以在 https://bytegem.github.io/vue-heroicons/ 网站上点击图标按钮复制 Vue Component Tag！然后粘贴到你需要的地方即可。

  为什么不做成 Font Icons？

  首先一点，SVGs 有 SVG 的优点，Font Icons 也有 Font Icons 的优点。显然，我更喜欢直接使用 SVG 一点，因为 DOM 是可控的！

  其他计划

  之后准备将 Heroicons 的 SVGs 做成 Flutter Widgets 用作图标库。

  最后

  如果你喜欢 Heroicons 请给 Heroicons 点一个 Star，如果你喜欢这个 Vue Component Icons 的包，请在 GitHub 👉https://github.com/bytegem/vue-heroicons 给我们一个 🌟Star

  保障

  https://github.com/bytegem/vue-heroicons 是一个我们自己商业项目都在用的包，回定期检查 Heroicons 是否更新，并更新此包。这个包的初衷就是好用！

  多说一点哦

  这个包是这么开发的？这个包其实核心内容就一个 Vue installer，就简单的几行代码。Vue Componets 全部都是使用代码生成的哦。

打包使用的 @vue/cli 工具进行打包的。 SVGs 是直接使用 cli 采集的 Heroicons 的 SVG 代码！有兴趣查看 GitHub 仓库的 @vue/cli/plugin.js 代码哦

本作品采用《CC 协议》，转载必须注明作者和本文链接