Vuetify 中,想要集成 Heroicons?看这里,我教你!

在不久之前,我发布了 🎉喜欢 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/ 这个网站:

Vuetify 中,想要集成 Heroicons?看这里,我教你!
选择你需要的图标,点击一下就会复制了。在你用的地方粘贴后的代码如下:

<HeroiconsAdjustmentsOutline />

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

$HeroiconsAdjustmentsOutline

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

❤️

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

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

Seven 的代码太渣,欢迎关注我的新拓展包 medz/cors 解决 PHP 项目程序设置跨域需求。

附言 1  ·  5天前

你写废了吗?[狗头]

讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!