Skip to content

A superset standalone icon-components for Vue with zero dependencies. Designed for ease of use and high performance.

License

Notifications You must be signed in to change notification settings

cawa-93/iconify-prerendered

Repository files navigation

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.


@iconify-prerendered

A superset standalone icon-components for Vue with zero dependencies. Designed for ease of use and high performance.

Features

  • 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

Installation

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

Usage

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.

Customizing icon default attributes

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
      });
  },
});

Available icons sets

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 Jun 10, 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 6, 2024
Charm Icons @iconify-prerendered/vue-charm Dec 11, 2023
Circle Flags @iconify-prerendered/vue-circle-flags Apr 4, 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 Jun 3, 2024
Dashicons @iconify-prerendered/vue-dashicons May 27, 2024
Devicon @iconify-prerendered/vue-devicon May 30, 2024
Devicon Plain @iconify-prerendered/vue-devicon-plain May 30, 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 Dec 11, 2023
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 Jun 3, 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 Apr 4, 2024
Font Awesome Regular @iconify-prerendered/vue-fa6-regular Apr 4, 2024
Font Awesome Solid @iconify-prerendered/vue-fa6-solid Apr 4, 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 Apr 7, 2024
Google Material Icons @iconify-prerendered/vue-ic Dec 11, 2023
Gravity UI Icons @iconify-prerendered/vue-gravity-ui May 30, 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 Apr 29, 2024
HeroIcons @iconify-prerendered/vue-heroicons Apr 29, 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 Apr 29, 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 Jun 13, 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 Apr 7, 2024
Material Design Light @iconify-prerendered/vue-mdi-light Dec 11, 2023
Material Line Icons @iconify-prerendered/vue-line-md Mar 22, 2024
Material Symbols @iconify-prerendered/vue-material-symbols Jun 6, 2024
Material Symbols Light @iconify-prerendered/vue-material-symbols-light Jun 6, 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 Dec 11, 2023
MingCute Icon @iconify-prerendered/vue-mingcute Mar 22, 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 Apr 22, 2024
OOUI @iconify-prerendered/vue-ooui Mar 25, 2024
Open Iconic @iconify-prerendered/vue-oi Dec 11, 2023
OpenMoji @iconify-prerendered/vue-openmoji Apr 15, 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
Simple Icons @iconify-prerendered/vue-simple-icons Jun 10, 2024
Simple line icons @iconify-prerendered/vue-simple-line-icons Dec 11, 2023
Skill Icons @iconify-prerendered/vue-skill-icons Feb 21, 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 May 23, 2024
TDesign Icons @iconify-prerendered/vue-tdesign Jun 3, 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 Dec 11, 2023
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 Mar 20, 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
Zondicons @iconify-prerendered/vue-zondicons Dec 11, 2023

License

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.

Development setup

  1. Install Deno.
  2. 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.
  3. Run deno task test for run all tests. See more about test running.

Benchmarking

You can benchmark two version of icon sets. To do that:

  1. Generate baseline icon set by command: deno task generate -p=fluent-emoji -o=benckmarks/generated/baseline
  2. Make any changes to generation process or whatever
  3. Generate tested icon set by command: deno task generate -p=fluent-emoji -o=benckmarks/generated/test
  4. Run benchmark by deno bench --allow-env
  5. Go to step #2

About

A superset standalone icon-components for Vue with zero dependencies. Designed for ease of use and high performance.

Topics

Resources

License

Stars

Watchers

Forks