Icon

unplugin-icons 随时以组件形式在任何地方访问成千上万个图标。

pnpm add -D unplugin-icons unplugin-vue-components

配置 vite.config.js

import vue from '@vitejs/plugin-vue'
import IconsResolver from 'unplugin-icons/resolver'
import Icons from 'unplugin-icons/vite'
import Components from 'unplugin-vue-components/vite'
import { defineConfig } from 'vite'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [
        IconsResolver({
          // prefix: "icon",
        }),
      ],
    }),
    Icons({
      autoInstall: true,
    }),
  ],
})

可直接使用 icones 上的所有图标

<template>
  <i-account-box />
</template>

样式

配置所有 Icon 默认样式

Icons({
  scale: 1.2, // Scale of icons against 1em
  defaultStyle: '', // Style apply to icons
  defaultClass: '', // Class names apply to icons
  compiler: null, // 'vue2', 'vue3', 'jsx'
  jsx: 'react', // 'react' or 'preact'
})

修改单个 icon 样式

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

自定义图标

从文件系统加载图标的帮助程序./assets/icons 下扩展名为 .svg 的文件将按其文件名加载您还可以提供一个转换回调来更改每个图标（可选）

import { FileSystemIconLoader } from 'unplugin-icons/loaders'

Icons({
  customCollections: {
    local: FileSystemIconLoader('./assets/icons', svg =>
      svg.replace(/^<svg /, '<svg fill="currentColor" '),),
  },
})

加载存储在远程服务器的 svg 文件作为图标

Icons({
  customCollections: {
    cloud: async (iconName) => {
      return fetch(`https://example.com/icons/${iconName}.svg`).then(res => res.text())
    },
  },
})

如果与自动导入的解析器一起使用，您需要告诉它您的自定义集合名称

IconResolver({
  customCollections: ['local', 'cloud'],
})