Veno UI 的 Vite 图标插件

按需导入图标作为组件。

特性

• 🤹 任意图标集 - 超过 10,000 个图标、徽标、表情符号等的 100 多个流行图标集。由 Iconify 提供支持。
• ☁️ 按需 - 仅捆绑您真正使用的图标。
• 📥 自动加载目录 - 加载目录下的图标文件作为自定义图标。
• 📲 自动导入 - 直接在模板中使用，匹配组件属性自动替换。

用法

模板中组件属性的静态替换

仅支持字符串的静态替换

<ve-button icon="mdi-close" />

实际会被替换成（此处只是演示，实际不会替换成 SFC 格式）

<script lang="ts" setup>
  import __veno_ui_icons_0 from '~veno-ui/icons/mdi/close'
</script>

<template>
  <ve-button :icon="__veno_ui_icons_0" />
</template>

加载自定义图标

默认自动加载 src/icons 目录下的所有 svg 结尾的文件，使用 ~veno-ui/icons 加载。

import { createVeno } from 'veno-ui'
import icons from '~veno-ui/icons'
const veno = createVeno({
  icons: {
    aliases: icons,
  },
})

安装

插件

npm i -D @veno-ui/vite-plugin-icons

图标数据

我们使用 Iconify 作为图标数据源（支持 100 多个图标集）。

您有两种安装方式：

安装全部插件

npm i -D @iconify/json

@iconify/json (~120MB) 包括来自 Iconify 的所有图标集。

按图标集安装

如果您只想使用几个图标集而不想下载整个集合，您也可以使用 @iconify-json/[collection-id] . 例如，要安装 Material Design Icons ，你可以这样做：

npm i -D @iconify-json/mdi

配置

import { defineConfig } from 'vite'
import Vue from '@vitejs/plugin-vue'
import Icons from '@veno-ui/vite-plugin-icons'

export default defineConfig({
  plugins: [
    Icons({
      // 选项
    }),
    Vue()
  ],
})

可用选项

所有可用选项看types.ts 。

export interface Options
{
  /**
   * @zh 引入文件的过滤模式
   * @en RegExp or glob to match files to be transformed
   *
   * @default [/\.vue$/, /\.vue\?vue/]
   */
  include?: FilterPattern

  /**
   * @zh 排除文件的过滤模式
   * @en RegExp or glob to match files to NOT be transformed
   *
   * @default [/[\\/]node_modules[\\/]/, /[\\/]\.git[\\/]/]
   */
  exclude?: FilterPattern

  /**
   * @zh 识别传入组件的属性值替换成图标组件
   *
   * @default
   *
   *  [
   *     { component: 'VeAlert', props: ['icon', 'closeIcon'] },
   *     { component: 'VeAvatar', props: ['icon'] },
   *     { component: 'VeBadge', props: ['icon'] },
   *     { component: 'VeButton', props: ['icon', 'prependIcon', 'appendIcon'] },
   *     { component: 'VeIcon', props: ['icon'] },
   *     { component: 'VeLink', props: ['icon', 'prependIcon', 'appendIcon'] },
   *     { component: 'VeListItem', props: ['prependIcon', 'appendIcon'] },
   *     { component: 'VeListGroup', props: ['collapseIcon', 'expandIcon'] },
   *     { component: 'VeFormControl', props: ['appendIcon'] },
   *     { component: 'VeInput', props: ['appendIcon', 'appendInnerIcon', 'clearIcon', 'prependInnerIcon', 'prefixIcon', 'suffixIcon'] },
   *     { component: 'VeSelect', props: ['appendIcon', 'appendInnerIcon', 'clearIcon', 'prependInnerIcon', 'prefixIcon', 'suffixIcon'] },
   *     { component: 'VeDatePicker', props: ['appendIcon', 'appendInnerIcon', 'clearIcon', 'prependInnerIcon', 'prefixIcon', 'suffixIcon'] },
   *   ]
   */
  replaces?: { component: string, props: string[] }[],

  /**
   * @zh 用于搜索图标的相对目录路径
   * @en Relative paths to the directory to search for icons
   *
   * @default 'src/icons'
   */
  dirs?: string | string[]

  /**
   * @zh 图标的有效文件扩展名
   * @en Valid file extensions for icons
   *
   * @default ['svg']
   */
  extensions?: string | string[]

  /**
   * @zh 搜索子目录
   * @en Search for subdirectories
   *
   * @default true
   */
  deep?: boolean

  /**
   * @zh 传递给 svgo 的选项
   * @en Options passed to Svgo
   *
   * @default { plugins: ['preset-default', 'removeViewBox', 'removeDimensions'] }
   */
  svgoOptions?: OptimizeOptions
}