?喜歡 Heroicons？這裡有一個優秀的 Heroicons for ❤️Vue.js 元件！

medz發表於2020-04-23
Vue.js元件

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

Seven 的程式碼太渣，歡迎關注我的新擴充包 medz/cors 解決 PHP 專案程式設定跨域需求。

相關文章