在不久之前，我发布了 🎉喜欢 Heroicons？这里有一个优秀的 Heroicons for ❤️Vue.js 组件！ Git preo bytegem/vue-heroicons 这个软件包！

其目的是为了让 Vue.js 开发者在自己的工程中轻松快捷以 Components 的形式使用其 Heroicons。从最初的 WIP 0.1 版本迭代到现在的 0.3.1 版本，我们内部已经在多个项目中开始使用！简直太方便了！

为什么现在还是 0.x 版本？

这原有得归咎于 refactoringui/heroicons 设计仓库，因为还有很多日常使用的图标提案正在进行！好了不扯别的了，开始吧！！！

安装

这里假定你项目是安装了 Vuetify 框架的，那么你需要先依赖 @bytegem/vue-heroicons 到你的项目：

npm i @bytegem/vue-heroicons -S

配置 Vuetify

如果你不太明白这是什么，其参考 Vuetify / 定制 / Icons 文档。

打开你 Vue.use(Vuetify) 的地方修改如下：

import  Vue  from  "vue";
import  Vuetify  from  "vuetify/lib";
import Heroicons, { icons } from "@bytegem/vue-heroicons";
import { VuetifyIcons } from "vuetify/types/services/icons";

Vue.use(Vuetify);
Vue.use(Heroicons);

// 将 icons map 转换为 Vuetify 的 icons map
// 这里用 for in 的原有是我是 TS 代码！！链式 .map 操作无法生效！
let _icons: Partial<VuetifyIcons> = {};
for (const name in icons) {
  _icons = {
    ..._icons,
    [name]: {
      component: icons[name]
    }
  };
}

export default new Vuetify({
  theme,
  icons: {
    values: {
      menu: { component: icons.HeroiconsMenuOutline },
      close: { component: icons.HeroiconsXOutline },
      clear: { component: icons.HeroiconsXOutline },
      expand: { component: icons.HeroiconsChevronDownSolid },
      next: { component: icons.HeroiconsChevronRightSolid },
      prev: { component: icons.HeroiconsChevronLeftSolid },
      delimiter: { component: icons.HeroiconsMinusCircleSolid },
      ..._icons
    }
  }
});

使用

现在，你在 Vuetify 需要传入图标的地方传入图标名称即可了！

最基本的使用：

<v-icon>$HeroiconsXSouild</v-icon>

一些组件需要传图标的地方，例如 v-list-group 的 prepend-icon ：

<v-list-group
    prepend-icon="$HeroiconsHomeSolid"
    ...
>

如何快速知道图标名称呢？

你可以打开 bytegem.github.io/vue-heroicons/ 这个网站：

选择你需要的图标，点击一下就会复制了。在你用的地方粘贴后的代码如下：

<HeroiconsAdjustmentsOutline />

这个代码也是会显示成图标的！不过既然在 Vuetify 中，你只需需要修改成:

$HeroiconsAdjustmentsOutline

放入 VIcon 标签中或者传入一些组件的 icon 属性中即可！

❤️

开源使我快乐，但是 Star 才是开源的动力！如果你喜欢，请给我们一个 Star 👉 github.com/bytegem/vue-heroicons

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