?喜歡 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 協議》，轉載必須註明作者和本文連結