@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.
• Zero dependencies.
• SSR / SSG friendly.
• TypeScript support.
• 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>



    <IconJs />
    <IconCardsHeart />
    <IconVuejs />



</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. It just works.

Available icons sets