This package has been deprecated

Author message:

renamed to `unplugin-icons`, see https://github.com/antfu/unplugin-icons/releases/tag/v0.7.0

vite-plugin-icons
TypeScript icon, indicating that this package has built-in type declarations

0.6.5 • Public • Published

vite-plugin-icons

Access thousands of icons as Vue components in Vite

Install

ℹ️ Vite 2 is supported from v0.2.x, Vite 1's support is discontinued.

Install the plugin and peer dependency @iconify/json

npm i -D vite-plugin-icons @iconify/json

Add it to vite.config.js

// vite.config.js
import Vue from '@vitejs/plugin-vue'
import Icons from 'vite-plugin-icons'

export default {
  plugins: [
    Vue(),
    Icons()
  ],
}
<script setup>
import IconAccessibility from 'virtual:vite-icons/carbon/accessibility'
import IconAccountBox from 'virtual:vite-icons/mdi/account-box'
</script>

<template>
  <icon-accessibility/>
  <icon-account-box style="font-size: 2em; color: red"/>
</template>

Options

You can set default styling for all icons. The following config shows the default values of each option:

// vite.config.js
import Vue from '@vitejs/plugin-vue'
import Icons from 'vite-plugin-icons'

export default {
  plugins: [
    Vue(),
    Icons({
      scale: 1.2, // Scale of icons against 1em
      defaultStyle: '', // Style apply to icons
      defaultClass: '', // Class names apply to icons
      compiler: null, // Compiler 'vue2' or 'vue3', by default detected automatically
    })
  ],
}

Auto Importing

Use with vite-plugin-components (>= v0.5.5)

// vite.config.js
import Vue from '@vitejs/plugin-vue'
import Components from 'vite-plugin-components'
import ViteIcons, { ViteIconsResolver } from 'vite-plugin-icons'

export default {
  plugins: [
    Vue(),
    Components({
      customComponentResolvers: ViteIconsResolver(),
    }),
    ViteIcons(),
  ],
}

Then you can use any icons as you want without explicit importing (only the used icons will be bundled)

<template>
  <i-carbon-accessibility/>
  <i-mdi-account-box style="font-size: 2em; color: red"/>
</template>

Name Conversion

When using component resolver, you have to follow the name conversion for icons to be properly inferred.

{prefix}-{collection}-{icon}

The collection field follows Iconify's collection IDs.

By default, the prefix is set to i while you can customize via config

export default {
  plugins: [
    Vue(),
    Components({
      customComponentResolvers: ViteIconsResolver({
        componentPrefix: 'icon' // <--
      }),
    }),
    ViteIcons(),
  ],
}
<template>
  <icon-mdi-account />
</template>

Non-prefix mode is also supported

ViteIconsResolver({
  componentPrefix: '', // <--
  // this is optional, default enabling all the collections supported by Iconify
  enabledCollections: ['mdi']
})
<template>
  <mdi-account />
</template>

Vue 2 Support

npm i -D vue-template-compiler vite-plugin-vue2

And it just works.

// vite.config.js
import { createVuePlugin } from 'vite-plugin-vue2'
import ViteIcons from 'vite-plugin-icons'

export default {
  plugins: [
    createVuePlugin(),
    ViteIcons(),
  ],
}

Comparsion with Purge Icons

vite-plugin-icons

Pros

  • SSR/SSG friendly
  • On-demanded bunding
  • Works with Vue 3

Cons

  • No Iconify runtime, no web fetching (string icon IDs)
  • Updates are sync with other content

purge-icons

Pros

  • Iconify runtime
  • On-demanded bundling combining with runtime web fetching
  • Framework agnostic

Cons

  • Icons show up after the Iconify runtime loaded
  • Not SSR/SSG friendly

Sponsors

This project is part of my Sponsor Program

License

MIT License © 2020 Anthony Fu

Readme

Keywords

none

Package Sidebar

Install

npm i vite-plugin-icons

Weekly Downloads

432

Version

0.6.5

License

MIT

Unpacked Size

19.2 kB

Total Files

8

Last publish

Collaborators

  • antfu