Note
This project is mainrained by developer from Ukraine 🇺🇦
Due to the ongoing war resulting from Russia's full-scale invasion of Ukraine, I currently lack the time for the full development of this open-source project. My primary focus is on ensuring the well-being of myself and my family. I'll prioritize and review all new contributions as soon as possible.
If you can, please consider supporting Ukraine or me personally.
Thank you for your understanding and support.
A superset standalone icon-components for Vue with zero dependencies. Designed for ease of use and high performance.
- Easy to use
- No plugins required! Compatible with any build tools.
- Designed for best compatibility with IDE auto-completion (Demo).
- Zero dependencies.
- SSR / SSG friendly.
- TypeScript support.
- Unified API across all icon sets.
- High performance
- Does not require any external resources like fonts, css, images.
- The icon code is embedded in your bundle.
- Supports tree shaking, so only those icons that you have used will be included in the bundle.
- Works offline.
- Powered by iconify.
Live demo: https://stackblitz.com/edit/iconify-prerendered-demo?file=src%2FApp.vue
Install the appropriate icon set
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
Just import icon-component from set like usual.
<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>
Only these three icons will be included in your bundle. All other icons may be tree-shaken by your bundler.
That's all you need. No plugins, extra configs, IDE extensions or something else.
By default, all icons have only two attributes: role="img"
and
aria-hidden="true"
. While you are free to redefine these attributes or add new
ones for each individual icon, you might want to apply certain attributes, such
as class
or style
, to all icons within a set.
To achieve this, you can re-export icons through a new Proxy
and include
default attributes
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
});
},
});
Icon set | Package | Last modified |
---|---|---|
Academicons | @iconify-prerendered/vue-academicons |
Dec 11, 2023 |
Akar Icons | @iconify-prerendered/vue-akar-icons |
Mar 22, 2024 |
Ant Design Icons | @iconify-prerendered/vue-ant-design |
Apr 9, 2024 |
Arcticons | @iconify-prerendered/vue-arcticons |
Jul 21, 2024 |
Basil | @iconify-prerendered/vue-basil |
Dec 11, 2023 |
Bitcoin Icons | @iconify-prerendered/vue-bitcoin-icons |
Jan 4, 2024 |
Bootstrap Icons | @iconify-prerendered/vue-bi |
Jan 5, 2024 |
BoxIcons | @iconify-prerendered/vue-bx |
Dec 11, 2023 |
BoxIcons Logo | @iconify-prerendered/vue-bxl |
Dec 11, 2023 |
BoxIcons Solid | @iconify-prerendered/vue-bxs |
Dec 11, 2023 |
BPMN | @iconify-prerendered/vue-bpmn |
Dec 11, 2023 |
Brandico | @iconify-prerendered/vue-brandico |
Dec 11, 2023 |
Bytesize Icons | @iconify-prerendered/vue-bytesize |
Dec 11, 2023 |
Carbon | @iconify-prerendered/vue-carbon |
Jun 19, 2024 |
Catppuccin Icons | @iconify-prerendered/vue-catppuccin |
Jul 17, 2024 |
Charm Icons | @iconify-prerendered/vue-charm |
Dec 11, 2023 |
Circle Flags | @iconify-prerendered/vue-circle-flags |
Jun 24, 2024 |
Circum Icons | @iconify-prerendered/vue-circum |
Apr 22, 2024 |
Clarity | @iconify-prerendered/vue-clarity |
Jun 3, 2024 |
Codicons | @iconify-prerendered/vue-codicon |
May 17, 2024 |
coolicons | @iconify-prerendered/vue-ci |
Dec 11, 2023 |
CoreUI Brands | @iconify-prerendered/vue-cib |
Dec 11, 2023 |
CoreUI Flags | @iconify-prerendered/vue-cif |
Dec 11, 2023 |
CoreUI Free | @iconify-prerendered/vue-cil |
Dec 11, 2023 |
Covid Icons | @iconify-prerendered/vue-covid |
Dec 11, 2023 |
Cryptocurrency Color Icons | @iconify-prerendered/vue-cryptocurrency-color |
Dec 11, 2023 |
Cryptocurrency Icons | @iconify-prerendered/vue-cryptocurrency |
Dec 11, 2023 |
css.gg | @iconify-prerendered/vue-gg |
Dec 11, 2023 |
Custom Brand Icons | @iconify-prerendered/vue-cbi |
Jul 18, 2024 |
Dashicons | @iconify-prerendered/vue-dashicons |
May 27, 2024 |
Devicon | @iconify-prerendered/vue-devicon |
Jul 12, 2024 |
Devicon Plain | @iconify-prerendered/vue-devicon-plain |
Jul 12, 2024 |
Elegant | @iconify-prerendered/vue-et |
Dec 11, 2023 |
Element Plus | @iconify-prerendered/vue-ep |
Mar 11, 2024 |
Elusive Icons | @iconify-prerendered/vue-el |
Dec 11, 2023 |
Emoji One (Colored) | @iconify-prerendered/vue-emojione |
Dec 11, 2023 |
Emoji One (Monotone) | @iconify-prerendered/vue-emojione-monotone |
Dec 11, 2023 |
Emoji One (v1) | @iconify-prerendered/vue-emojione-v1 |
Dec 11, 2023 |
Entypo+ | @iconify-prerendered/vue-entypo |
Dec 11, 2023 |
Entypo+ Social | @iconify-prerendered/vue-entypo-social |
Dec 11, 2023 |
EOS Icons | @iconify-prerendered/vue-eos-icons |
May 14, 2024 |
Eva Icons | @iconify-prerendered/vue-eva |
Dec 11, 2023 |
Evil Icons | @iconify-prerendered/vue-ei |
Dec 11, 2023 |
Feather Icon | @iconify-prerendered/vue-fe |
Dec 11, 2023 |
Feather Icons | @iconify-prerendered/vue-feather |
Dec 11, 2023 |
File Icons | @iconify-prerendered/vue-file-icons |
Jul 17, 2024 |
Firefox OS Emoji | @iconify-prerendered/vue-fxemoji |
Dec 11, 2023 |
Flag Icons | @iconify-prerendered/vue-flag |
May 30, 2024 |
Flagpack | @iconify-prerendered/vue-flagpack |
Jan 4, 2024 |
Flat Color Icons | @iconify-prerendered/vue-flat-color-icons |
Dec 11, 2023 |
Flat UI Icons | @iconify-prerendered/vue-flat-ui |
Dec 11, 2023 |
Flowbite Icons | @iconify-prerendered/vue-flowbite |
Apr 25, 2024 |
Fluent Emoji | @iconify-prerendered/vue-fluent-emoji |
Dec 11, 2023 |
Fluent Emoji Flat | @iconify-prerendered/vue-fluent-emoji-flat |
Dec 11, 2023 |
Fluent Emoji High Contrast | @iconify-prerendered/vue-fluent-emoji-high-contrast |
Dec 18, 2023 |
Fluent UI MDL2 | @iconify-prerendered/vue-fluent-mdl2 |
Apr 7, 2024 |
Fluent UI System Icons | @iconify-prerendered/vue-fluent |
Jul 15, 2024 |
Font Awesome 4 | @iconify-prerendered/vue-fa |
Dec 11, 2023 |
Font Awesome 5 Brands | @iconify-prerendered/vue-fa-brands |
Dec 11, 2023 |
Font Awesome 5 Regular | @iconify-prerendered/vue-fa-regular |
Dec 11, 2023 |
Font Awesome 5 Solid | @iconify-prerendered/vue-fa-solid |
Dec 11, 2023 |
Font Awesome Brands | @iconify-prerendered/vue-fa6-brands |
Jul 18, 2024 |
Font Awesome Regular | @iconify-prerendered/vue-fa6-regular |
Jul 18, 2024 |
Font Awesome Solid | @iconify-prerendered/vue-fa6-solid |
Jul 18, 2024 |
Font-GIS | @iconify-prerendered/vue-gis |
Apr 4, 2024 |
FontAudio | @iconify-prerendered/vue-fad |
Dec 11, 2023 |
Fontelico | @iconify-prerendered/vue-fontelico |
Dec 11, 2023 |
Fontisto | @iconify-prerendered/vue-fontisto |
Dec 11, 2023 |
FormKit Icons | @iconify-prerendered/vue-formkit |
Apr 9, 2024 |
Foundation | @iconify-prerendered/vue-foundation |
Dec 11, 2023 |
Framework7 Icons | @iconify-prerendered/vue-f7 |
Jan 5, 2024 |
Gala Icons | @iconify-prerendered/vue-gala |
Nov 26, 2023 |
Game Icons | @iconify-prerendered/vue-game-icons |
Apr 7, 2024 |
GeoGlyphs | @iconify-prerendered/vue-geo |
Dec 11, 2023 |
Gitlab SVGs | @iconify-prerendered/vue-pajamas |
Jul 4, 2024 |
Google Material Icons | @iconify-prerendered/vue-ic |
Dec 11, 2023 |
Gravity UI Icons | @iconify-prerendered/vue-gravity-ui |
Jun 17, 2024 |
Gridicons | @iconify-prerendered/vue-gridicons |
Dec 11, 2023 |
Grommet Icons | @iconify-prerendered/vue-grommet-icons |
May 27, 2024 |
Guidance | @iconify-prerendered/vue-guidance |
Dec 11, 2023 |
Health Icons | @iconify-prerendered/vue-healthicons |
Jul 9, 2024 |
HeroIcons | @iconify-prerendered/vue-heroicons |
Jul 12, 2024 |
HeroIcons v1 Outline | @iconify-prerendered/vue-heroicons-outline |
Dec 11, 2023 |
HeroIcons v1 Solid | @iconify-prerendered/vue-heroicons-solid |
Dec 11, 2023 |
Huge Icons | @iconify-prerendered/vue-hugeicons |
May 14, 2024 |
Humbleicons | @iconify-prerendered/vue-humbleicons |
Apr 4, 2024 |
Icalicons | @iconify-prerendered/vue-il |
Dec 11, 2023 |
IcoMoon Free | @iconify-prerendered/vue-icomoon-free |
Dec 11, 2023 |
IconaMoon | @iconify-prerendered/vue-iconamoon |
Dec 11, 2023 |
Iconoir | @iconify-prerendered/vue-iconoir |
Jul 21, 2024 |
IconPark | @iconify-prerendered/vue-icon-park |
Nov 26, 2023 |
IconPark Outline | @iconify-prerendered/vue-icon-park-outline |
Dec 11, 2023 |
IconPark Solid | @iconify-prerendered/vue-icon-park-solid |
Dec 11, 2023 |
IconPark TwoTone | @iconify-prerendered/vue-icon-park-twotone |
Dec 11, 2023 |
Icons8 Windows 10 Icons | @iconify-prerendered/vue-icons8 |
Dec 11, 2023 |
Icons8 Windows 8 Icons | @iconify-prerendered/vue-wpf |
Dec 11, 2023 |
Innowatio Font | @iconify-prerendered/vue-iwwa |
Dec 11, 2023 |
IonIcons | @iconify-prerendered/vue-ion |
May 2, 2024 |
Jam Icons | @iconify-prerendered/vue-jam |
Dec 11, 2023 |
Lets Icons | @iconify-prerendered/vue-lets-icons |
Dec 11, 2023 |
Ligature Symbols | @iconify-prerendered/vue-ls |
Dec 11, 2023 |
Line Awesome | @iconify-prerendered/vue-la |
Dec 11, 2023 |
Lucide | @iconify-prerendered/vue-lucide |
Jul 21, 2024 |
Mage Icons | @iconify-prerendered/vue-mage |
Feb 24, 2024 |
Majesticons | @iconify-prerendered/vue-majesticons |
Dec 11, 2023 |
Maki | @iconify-prerendered/vue-maki |
Mar 4, 2024 |
Map Icons | @iconify-prerendered/vue-map |
Dec 11, 2023 |
Marketeq | @iconify-prerendered/vue-marketeq |
Apr 4, 2024 |
Material Design Iconic Font | @iconify-prerendered/vue-zmdi |
Dec 11, 2023 |
Material Design Icons | @iconify-prerendered/vue-mdi |
Jun 20, 2024 |
Material Design Light | @iconify-prerendered/vue-mdi-light |
Dec 11, 2023 |
Material Line Icons | @iconify-prerendered/vue-line-md |
Jun 20, 2024 |
Material Symbols | @iconify-prerendered/vue-material-symbols |
Jul 18, 2024 |
Material Symbols Light | @iconify-prerendered/vue-material-symbols-light |
Jul 18, 2024 |
Medical Icons | @iconify-prerendered/vue-medical-icon |
Dec 11, 2023 |
Memory Icons | @iconify-prerendered/vue-memory |
Jan 2, 2024 |
Meteocons | @iconify-prerendered/vue-meteocons |
Jul 1, 2024 |
MingCute Icon | @iconify-prerendered/vue-mingcute |
Jun 20, 2024 |
Mono Icons | @iconify-prerendered/vue-mi |
Dec 11, 2023 |
Mono Icons | @iconify-prerendered/vue-mono-icons |
Dec 11, 2023 |
Myna UI Icons | @iconify-prerendered/vue-mynaui |
Mar 22, 2024 |
Nimbus | @iconify-prerendered/vue-nimbus |
Dec 11, 2023 |
Nonicons | @iconify-prerendered/vue-nonicons |
Dec 11, 2023 |
Noto Emoji | @iconify-prerendered/vue-noto |
Dec 11, 2023 |
Noto Emoji (v1) | @iconify-prerendered/vue-noto-v1 |
Dec 11, 2023 |
Octicons | @iconify-prerendered/vue-octicon |
Jul 12, 2024 |
OOUI | @iconify-prerendered/vue-ooui |
Jul 12, 2024 |
Open Iconic | @iconify-prerendered/vue-oi |
Dec 11, 2023 |
OpenMoji | @iconify-prerendered/vue-openmoji |
Jun 20, 2024 |
OpenSearch UI | @iconify-prerendered/vue-oui |
May 2, 2024 |
Pepicons | @iconify-prerendered/vue-pepicons |
Jan 2, 2023 |
Pepicons Pencil | @iconify-prerendered/vue-pepicons-pencil |
Dec 11, 2023 |
Pepicons Pop! | @iconify-prerendered/vue-pepicons-pop |
Dec 11, 2023 |
Pepicons Print | @iconify-prerendered/vue-pepicons-print |
Dec 11, 2023 |
Phosphor | @iconify-prerendered/vue-ph |
May 6, 2024 |
Pixelarticons | @iconify-prerendered/vue-pixelarticons |
Apr 18, 2024 |
PrestaShop Icons | @iconify-prerendered/vue-ps |
Dec 11, 2023 |
Prime Icons | @iconify-prerendered/vue-prime |
May 9, 2024 |
Quill Icons | @iconify-prerendered/vue-quill |
Dec 11, 2023 |
Radix Icons | @iconify-prerendered/vue-radix-icons |
Dec 11, 2023 |
Raphael | @iconify-prerendered/vue-raphael |
Dec 11, 2023 |
Remix Icon | @iconify-prerendered/vue-ri |
Jun 13, 2024 |
Rivet Icons | @iconify-prerendered/vue-rivet-icons |
Jun 20, 2024 |
Simple Icons | @iconify-prerendered/vue-simple-icons |
Jul 9, 2024 |
Simple line icons | @iconify-prerendered/vue-simple-line-icons |
Dec 11, 2023 |
Skill Icons | @iconify-prerendered/vue-skill-icons |
Jul 17, 2024 |
SmartIcons Glyph | @iconify-prerendered/vue-si-glyph |
Dec 11, 2023 |
Solar | @iconify-prerendered/vue-solar |
Dec 11, 2023 |
Streamline | @iconify-prerendered/vue-streamline |
Dec 11, 2023 |
Streamline Emojis | @iconify-prerendered/vue-streamline-emojis |
Dec 11, 2023 |
Subway Icon Set | @iconify-prerendered/vue-subway |
Jun 3, 2024 |
SVG Logos | @iconify-prerendered/vue-logos |
Jun 6, 2024 |
SVG Spinners | @iconify-prerendered/vue-svg-spinners |
Jan 15, 2023 |
System UIcons | @iconify-prerendered/vue-system-uicons |
Dec 11, 2023 |
Tabler Icons | @iconify-prerendered/vue-tabler |
Jul 18, 2024 |
TDesign Icons | @iconify-prerendered/vue-tdesign |
Jul 9, 2024 |
Teenyicons | @iconify-prerendered/vue-teenyicons |
Dec 11, 2023 |
Token Icons | @iconify-prerendered/vue-token |
Jun 13, 2024 |
Token Icons Branded | @iconify-prerendered/vue-token-branded |
Jun 13, 2024 |
TopCoat Icons | @iconify-prerendered/vue-topcoat |
Dec 11, 2023 |
Twitter Emoji | @iconify-prerendered/vue-twemoji |
Dec 11, 2023 |
Typicons | @iconify-prerendered/vue-typcn |
Dec 11, 2023 |
uiw icons | @iconify-prerendered/vue-uiw |
Jun 24, 2024 |
Unicons | @iconify-prerendered/vue-uil |
Dec 11, 2023 |
Unicons Monochrome | @iconify-prerendered/vue-uim |
Dec 11, 2023 |
Unicons Solid | @iconify-prerendered/vue-uis |
Dec 11, 2023 |
Unicons Thin Line | @iconify-prerendered/vue-uit |
Dec 11, 2023 |
UnJS Logos | @iconify-prerendered/vue-unjs |
Jul 17, 2024 |
Vaadin Icons | @iconify-prerendered/vue-vaadin |
Dec 11, 2023 |
Vesper Icons | @iconify-prerendered/vue-vs |
Dec 11, 2023 |
VSCode Icons | @iconify-prerendered/vue-vscode-icons |
Jun 3, 2024 |
Weather Icons | @iconify-prerendered/vue-wi |
Dec 11, 2023 |
Web Symbols Liga | @iconify-prerendered/vue-websymbol |
Dec 11, 2023 |
WebHostingHub Glyphs | @iconify-prerendered/vue-whh |
Dec 11, 2023 |
WeUI Icon | @iconify-prerendered/vue-weui |
Jun 20, 2024 |
Zondicons | @iconify-prerendered/vue-zondicons |
Dec 11, 2023 |
The code for generating the icon sets is distributed under the MIT license. The icon sets themselves are distributed under the license of their author.
- Install Deno.
- Run
deno task generate
for generate all collections. Params:--version
or-v
specify version base for generated packages. Optional.--prefix
or-p
specify with collection to generate. May be multiple times. Optional.--no-replace-ids
disable replacing ids. Required for test case. Optional.--output
or-o
directory to place generated files. Optional.
- Run
deno task test
for run all tests. See more about test running.
You can benchmark two version of icon sets. To do that:
- Generate baseline icon set by command:
deno task generate -p=fluent-emoji -o=benckmarks/generated/baseline
- Make any changes to generation process or whatever
- Generate tested icon set by command:
deno task generate -p=fluent-emoji -o=benckmarks/generated/test
- Run benchmark by
deno bench --allow-env
- Go to step #2