首頁>編程相關>三方組件
下載

[！

我盡力而為，但是由於俄羅斯正在進行的全面入侵烏克蘭，我幾乎沒有能力支持開源項目。

如果我的工作對您有用，請考慮個人支持烏克蘭或我個人。即使您的1美元也有影響！

@iconify-prerendered

具有零依賴性的VUE的超級獨立圖標組件。為易用性和高性能而設計。

特徵

  • 便於使用
    • 無需插件！與任何構建工具兼容。
    • 為與IDE自動完成（DEMO）的最佳兼容性而設計。
    • 零依賴性。
    • SSR / SSG友好。
    • 打字稿支持。
    • 所有圖標集中的統一API。
  • 高性能
    • 不需要任何外部資源，例如字體，CSS，圖像。
    • 圖標代碼嵌入了您的捆綁包中。
    • 支撐樹搖動，因此只有您使用的那些圖標才會包含在捆綁包中。
    • 離線工作。
  • 由Iconify提供動力。

實時演示：https：//stackblitz.com/edit/iconify-prerendered-demo?file=src%2fapp.vue

安裝

安裝適當的圖標集

 npm i @iconify-prerendered/vue-<icon-set-name>

# Bootstrap Icons
npm i @iconify-prerendered/vue-bi

# Material Design Icons
npm i @iconify-prerendered/vue-mdi

用法

從像通常的集合中導入圖標組件。 

< script setup>
// Import two icons from Font Awesome Brands
import { IconVuejs , IconJs } from ' @iconify-prerendered/vue-fa-brands ' ;
// Import one Icon from Material Design icons
import { IconCardsHeart } from ' @iconify-prerendered/vue-mdi ' ;
</ script >

< template >
  < p >
    < IconJs />
    < IconCardsHeart />
    < IconVuejs />
  </ p >
</ template >

您的捆綁包中只有這三個圖標。您的捆綁器可能會將所有其他圖標塑造。

這就是您所需要的。沒有插件，額外的配置，IDE擴展名或其他內容。

自定義圖標默認屬性

默認情況下，所有圖標僅具有兩個屬性： role="img"和aria-hidden="true" 。當您可以自由重新定義這些屬性或為每個圖標添加新屬性時，您可能需要將某些屬性（例如class或style ）應用於集合中的所有圖標。

為了實現這一目標，您可以通過new Proxy重新刪除圖標並包含默認屬性

 import * as defaultIcons from '@iconify-prerendered/vue-mdi' ;

// accessing to icon through this Proxy will add additional attributes
export const themedIcons = new Proxy ( { } as typeof defaultIcons , {
  get ( _ , iconKey : keyof typeof defaultIcons ) {
    return ( ) =>
      defaultIcons [ iconKey ] ( {
        class : 'pre-defined-class' ,
        // ... any other attributes
      } ) ;
  } ,
} ) ;

可用圖標集

圖標集包裹最後修改
學者@iconify-prerendered/vue-academicons 2024年9月28日
akar圖標@iconify-prerendered/vue-akar-icons 2024年8月4日
螞蟻設計圖標@iconify-prerendered/vue-ant-design 2024年12月16日
北極@iconify-prerendered/vue-arcticons 2024年12月28日
羅勒@iconify-prerendered/vue-basil 2024年8月4日
比特幣圖標@iconify-prerendered/vue-bitcoin-icons 2024年8月4日
引導圖標@iconify-prerendered/vue-bi 2024年1月5日
Boxicons @iconify-prerendered/vue-bx 2024年8月4日
Boxicons徽標@iconify-prerendered/vue-bxl 2024年8月4日
boxicons固體@iconify-prerendered/vue-bxs 2024年8月4日
BPMN @iconify-prerendered/vue-bpmn 2024年8月4日
Brandico @iconify-prerendered/vue-brandico 2024年8月4日
字節化圖標@iconify-prerendered/vue-bytesize 2024年8月4日
碳@iconify-prerendered/vue-carbon 2024年10月26日
catppuccin圖標@iconify-prerendered/vue-catppuccin 12月3日，2024年
魅力圖標@iconify-prerendered/vue-charm 2024年8月4日
圓旗@iconify-prerendered/vue-circle-flags 2024年12月12日
訓練圖標@iconify-prerendered/vue-circum 2024年4月22日
明晰@iconify-prerendered/vue-clarity 2024年6月3日
法典圖標@iconify-prerendered/vue-codex 2024年12月27日
代碼子@iconify-prerendered/vue-codicon 2024年12月12日
涼聲@iconify-prerendered/vue-ci 2024年8月4日
Coreui品牌@iconify-prerendered/vue-cib 2024年7月25日
CoreUI標誌@iconify-prerendered/vue-cif 2024年7月25日
免費的Coreui @iconify-prerendered/vue-cil 2024年7月25日
共同圖標@iconify-prerendered/vue-covid 2024年8月4日
加密貨幣顏色圖標@iconify-prerendered/vue-cryptocurrency-color 2024年8月4日
加密貨幣圖標@iconify-prerendered/vue-cryptocurrency 2024年8月4日
css.gg @iconify-prerendered/vue-gg 2024年8月4日
Cuida圖標@iconify-prerendered/vue-cuida 2024年10月3日
自定義品牌圖標@iconify-prerendered/vue-cbi 2024年11月19日
dashicons @iconify-prerendered/vue-dashicons 2024年5月27日
德文@iconify-prerendered/vue-devicon 2024年12月26日
Devicon Plain @iconify-prerendered/vue-devicon-plain 2024年12月26日
二重奏@iconify-prerendered/vue-duo-icons 2024年9月28日
優雅的@iconify-prerendered/vue-et 2024年8月4日
元素加@iconify-prerendered/vue-ep 2024年3月11日
難以捉摸的圖標@iconify-prerendered/vue-el 2024年8月4日
表情符號一（彩色） @iconify-prerendered/vue-emojione 2024年8月4日
表情符號一（單調） @iconify-prerendered/vue-emojione-monotone 2024年8月4日
表情符號一（v1） @iconify-prerendered/vue-emojione-v1 2024年8月4日
Entypo+ @iconify-prerendered/vue-entypo 2024年8月4日
Entypo+社交@iconify-prerendered/vue-entypo-social 2024年8月4日
EOS圖標@iconify-prerendered/vue-eos-icons 2024年8月4日
eva圖標@iconify-prerendered/vue-eva 2024年8月4日
邪惡的偶像@iconify-prerendered/vue-ei 2024年8月4日
Famicons @iconify-prerendered/vue-famicons 2024年12月27日
羽毛圖標@iconify-prerendered/vue-fe 2024年8月4日
羽毛圖標@iconify-prerendered/vue-feather 2024年8月4日
文件圖標@iconify-prerendered/vue-file-icons 2024年7月17日
Firefox OS表情符號@iconify-prerendered/vue-fxemoji 2024年8月4日
標誌圖標@iconify-prerendered/vue-flag 2024年10月7日
flagpack @iconify-prerendered/vue-flagpack 2024年8月4日
純色圖標@iconify-prerendered/vue-flat-color-icons 2024年8月4日
平面UI圖標@iconify-prerendered/vue-flat-ui 2024年8月4日
流口圖標@iconify-prerendered/vue-flowbite 2024年10月11日
流利的表情符號@iconify-prerendered/vue-fluent-emoji 2024年10月3日
流利的表情符號平坦@iconify-prerendered/vue-fluent-emoji-flat 2024年10月3日
流利的表情符號高對比度@iconify-prerendered/vue-fluent-emoji-high-contrast 2024年10月3日
流利的UI MDL2 @iconify-prerendered/vue-fluent-mdl2 2024年4月7日
流利的UI系統顏色圖標@iconify-prerendered/vue-fluent-color 2024年12月16日
流利的UI系統圖標@iconify-prerendered/vue-fluent 2024年12月16日
字體很棒4 @iconify-prerendered/vue-fa 2023年12月11日
字體很棒的5個品牌@iconify-prerendered/vue-fa-brands 2024年8月4日
字體很棒5常規@iconify-prerendered/vue-fa-regular 2024年8月4日
字體真棒5固體@iconify-prerendered/vue-fa-solid 2024年8月4日
字體很棒的品牌@iconify-prerendered/vue-fa6-brands 2024年12月17日
字體很棒的常規@iconify-prerendered/vue-fa6-regular 2024年11月19日
字體真棒@iconify-prerendered/vue-fa6-solid 2024年11月19日
字體gis @iconify-prerendered/vue-gis 2024年8月1日
fontaudio @iconify-prerendered/vue-fad 2024年8月4日
Fontelico @iconify-prerendered/vue-fontelico 2024年8月4日
豐特斯托@iconify-prerendered/vue-fontisto 2024年8月4日
FormKit圖標@iconify-prerendered/vue-formkit 2024年4月9日
基礎@iconify-prerendered/vue-foundation 2024年8月4日
Framework7圖標@iconify-prerendered/vue-f7 2024年8月4日
晚會圖標@iconify-prerendered/vue-gala 2023年11月26日
遊戲圖標@iconify-prerendered/vue-game-icons 2024年4月7日
花園SVG圖標@iconify-prerendered/vue-garden 2024年12月27日
地理素@iconify-prerendered/vue-geo 2024年8月4日
Gitlab SVGS @iconify-prerendered/vue-pajamas 2024年11月14日
Google材料圖標@iconify-prerendered/vue-ic 2024年8月4日
重力UI圖標@iconify-prerendered/vue-gravity-ui 2024年12月16日
Gridicons @iconify-prerendered/vue-gridicons 2024年8月4日
索環圖標@iconify-prerendered/vue-grommet-icons 2024年5月27日
指導@iconify-prerendered/vue-guidance 2024年8月4日
健康圖標@iconify-prerendered/vue-healthicons 2024年12月28日
英雄@iconify-prerendered/vue-heroicons 2024年7月25日
英雄V1大綱@iconify-prerendered/vue-heroicons-outline 2024年8月4日
英雄v1固體@iconify-prerendered/vue-heroicons-solid 2024年8月4日
巨大的圖標@iconify-prerendered/vue-hugeicons 2024年12月21日
謙虛@iconify-prerendered/vue-humbleicons 2024年12月23日
iCicalicons @iconify-prerendered/vue-il 2023年12月11日
免費ICOMOON @iconify-prerendered/vue-icomoon-free 2024年8月4日
偶像@iconify-prerendered/vue-iconamoon 2024年8月4日
Iconoir @iconify-prerendered/vue-iconoir 2024年12月28日
圖示@iconify-prerendered/vue-icon-park 2023年11月26日
圖標大綱@iconify-prerendered/vue-icon-park-outline 2024年8月4日
圖標固體@iconify-prerendered/vue-icon-park-solid 2024年8月4日
IconPark Twotone @iconify-prerendered/vue-icon-park-twotone 2024年8月4日
Icons8 Windows 10圖標@iconify-prerendered/vue-icons8 2024年8月4日
Icons8 Windows 8圖標@iconify-prerendered/vue-wpf 2024年8月4日
Innowatio字體@iconify-prerendered/vue-iwwa 2024年8月4日
離子@iconify-prerendered/vue-ion 2024年5月2日
果醬圖標@iconify-prerendered/vue-jam 2024年8月4日
讓圖標@iconify-prerendered/vue-lets-icons 2024年8月4日
結紮符號@iconify-prerendered/vue-ls 2024年8月4日
線真棒@iconify-prerendered/vue-la 2024年8月4日
lineicons @iconify-prerendered/vue-lineicons 2024年10月26日
LSICON @iconify-prerendered/vue-lsicon 2024年10月3日
盧西德@iconify-prerendered/vue-lucide 2024年12月21日
盧西德實驗室@iconify-prerendered/vue-lucide-lab 2024年11月9日
法師圖標@iconify-prerendered/vue-mage 2024年8月4日
雄偉@iconify-prerendered/vue-majesticons 2024年8月4日
麥基@iconify-prerendered/vue-maki 2024年12月16日
地圖圖標@iconify-prerendered/vue-map 2024年8月4日
Marketeq @iconify-prerendered/vue-marketeq 2024年4月4日
材料設計標誌性字體@iconify-prerendered/vue-zmdi 2023年12月11日
材料設計圖標@iconify-prerendered/vue-mdi 2024年6月20日
材料設計燈@iconify-prerendered/vue-mdi-light 2024年8月4日
物質線圖標@iconify-prerendered/vue-line-md 2024年12月9日
物質符號@iconify-prerendered/vue-material-symbols 2024年12月6日
物質符號光@iconify-prerendered/vue-material-symbols-light 2024年12月6日
醫療圖標@iconify-prerendered/vue-medical-icon 2024年8月4日
內存圖標@iconify-prerendered/vue-memory 2024年1月2日
meteocon @iconify-prerendered/vue-meteocons 7月1日，2024年
流星圖標@iconify-prerendered/vue-meteor-icons 2024年11月9日
mingcute圖標@iconify-prerendered/vue-mingcute 2024年12月23日
單圖標@iconify-prerendered/vue-mi 2024年8月4日
單圖標@iconify-prerendered/vue-mono-icons 2024年8月4日
myna ui圖標@iconify-prerendered/vue-mynaui 2024年11月25日
雨雲@iconify-prerendered/vue-nimbus 2024年8月4日
非元素@iconify-prerendered/vue-nonicons 2024年12月16日
Noto Emoji @iconify-prerendered/vue-noto 2024年10月7日
Noto Emoji（V1） @iconify-prerendered/vue-noto-v1 2024年8月4日
NRK核心圖標@iconify-prerendered/vue-nrk 2024年11月14日
八孔@iconify-prerendered/vue-octicon 2024年12月6日
Ooui @iconify-prerendered/vue-ooui 2024年12月21日
開放標誌性@iconify-prerendered/vue-oi 2024年8月4日
OpenMoji @iconify-prerendered/vue-openmoji 2024年10月23日
OpenSearch UI @iconify-prerendered/vue-oui 2024年11月2日
pepicons @iconify-prerendered/vue-pepicons 2023年1月2日
pepicons鉛筆@iconify-prerendered/vue-pepicons-pencil 2024年8月4日
Pepicons流行！ @iconify-prerendered/vue-pepicons-pop 2024年8月4日
Pepicons印刷@iconify-prerendered/vue-pepicons-print 2024年8月4日
磷@iconify-prerendered/vue-ph 2024年5月6日
Pixelarticons @iconify-prerendered/vue-pixelarticons 2024年4月18日
Prestashop圖標@iconify-prerendered/vue-ps 2024年8月4日
主要圖標@iconify-prerendered/vue-prime 2024年5月9日
pro @iconify-prerendered/vue-proicons 2024年12月16日
Qlementine圖標@iconify-prerendered/vue-qlementine-icons 2024年11月25日
奎爾圖標@iconify-prerendered/vue-quill 2024年8月4日
radix圖標@iconify-prerendered/vue-radix-icons 2024年8月4日
拉斐爾@iconify-prerendered/vue-raphael 2024年8月4日
混音圖標@iconify-prerendered/vue-ri 2024年12月17日
鉚釘圖標@iconify-prerendered/vue-rivet-icons 2024年6月20日
Sargam圖標@iconify-prerendered/vue-si 2024年10月8日
西門子工業經驗圖標@iconify-prerendered/vue-ix 2024年11月9日
簡單圖標@iconify-prerendered/vue-simple-icons 2024年12月23日
簡單的線圖標@iconify-prerendered/vue-simple-line-icons 2024年8月4日
技能圖標@iconify-prerendered/vue-skill-icons 2024年7月17日
Smarticons字形@iconify-prerendered/vue-si-glyph 2024年8月4日
太陽的@iconify-prerendered/vue-solar 2024年8月4日
存放圖標@iconify-prerendered/vue-stash 2024年10月8日
精簡@iconify-prerendered/vue-streamline 2024年8月4日
流線表情符號@iconify-prerendered/vue-streamline-emojis 2024年8月4日
地鐵圖標集@iconify-prerendered/vue-subway 2024年6月3日
SVG徽標@iconify-prerendered/vue-logos 2024年10月3日
SVG旋轉器@iconify-prerendered/vue-svg-spinners 2023年1月15日
系統UICON @iconify-prerendered/vue-system-uicons 2024年8月4日
表圖標@iconify-prerendered/vue-tabler 2024年12月16日
tdesign圖標@iconify-prerendered/vue-tdesign 2024年11月28日
雅典@iconify-prerendered/vue-teenyicons 2024年8月4日
面漆圖標@iconify-prerendered/vue-topcoat 2024年8月4日
Twitter表情符號@iconify-prerendered/vue-twemoji 2024年8月4日
古使@iconify-prerendered/vue-typcn 2024年8月4日
UIW圖標@iconify-prerendered/vue-uiw 2024年6月24日
單人@iconify-prerendered/vue-uil 2024年12月17日
Unicons單色@iconify-prerendered/vue-uim 2024年12月17日
Unicons固體@iconify-prerendered/vue-uis 2024年12月17日
Unicons細線@iconify-prerendered/vue-uit 2024年12月17日
UNJS徽標@iconify-prerendered/vue-unjs 2024年7月17日
vaadin圖標@iconify-prerendered/vue-vaadin 2024年8月4日
Vesper圖標@iconify-prerendered/vue-vs 2023年12月11日
VSCODE圖標@iconify-prerendered/vue-vscode-icons 2024年12月16日
天氣圖標@iconify-prerendered/vue-wi 2024年8月4日
Web符號LIGA @iconify-prerendered/vue-websymbol 2023年12月11日
Web3圖標@iconify-prerendered/vue-token 2024年12月19日
Web3圖標品牌@iconify-prerendered/vue-token-branded 2024年12月19日
WebhostingHub字形@iconify-prerendered/vue-whh 2024年8月4日
weui圖標@iconify-prerendered/vue-weui 2024年6月20日
Zondicons @iconify-prerendered/vue-zondicons 2024年8月4日

執照

生成圖標集的代碼根據MIT許可證分發。圖標集本身是根據作者的許可分配的。

開發設置

  1. 安裝Deno。
  2. 運行deno task generate以生成所有集合。參數：
    • --version或-v為生成軟件包指定版本庫。選修的。
    • --prefix或-p用要生成的集合指定。也許多次。選修的。
    • --no-replace-ids禁用更換ID。測試案例需要。選修的。
    • --output或-o目錄以放置生成的文件。選修的。
  3. 運行deno task test以進行所有測試。查看有關測試運行的更多信息。

基準測試

您可以基準兩個版本的圖標集。這樣做：

  1. 生成由命令設置的deno task generate -p=fluent-emoji -o=benckmarks/generated/baseline baseline
  2. 對生成過程或其他任何更改
  3. 由命令deno task generate -p=fluent-emoji -o=benckmarks/generated/test oferated/ test
  4. deno bench --allow-env
  5. 轉到步驟＃2
展開
附加信息
相關應用
爲您推薦
相關資訊 全部