Vuetify 中，想要整合 Heroicons？看這裡，我教你！

medz發表於2020-05-19
Vue

在不久之前，我釋出了 ?喜歡 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 專案程式設定跨域需求。

相關文章