首页>编程相关>三方组件
下载

[！

我尽力而为，但是由于俄罗斯正在进行的全面入侵乌克兰，我几乎没有能力支持开源项目。

如果我的工作对您有用，请考虑个人支持乌克兰或我个人。即使您的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
  2. 对生成过程或其他任何更改
  3. 由命令设置的测试图标生成： deno task generate -p=fluent-emoji -o=benckmarks/generated/test
  4. deno bench --allow-env
  5. 转到步骤＃2
展开
附加信息
相关应用
为您推荐
相关资讯 全部