(0.4.13)
Oeos-Components

Appearance

On this page

svg图标组件 ​

https://github.com/vbenjs/vite-plugin-svg-icons

Hidden Title ​

注意: 如果svg本身不支持改变颜色, 那么设置color也是不起作用的 . 如果希望svg能够改变颜色, 那需要将svg的代码中的fill改为currentColor

svg图片存放地址: docs/.vitepress/theme/assets/svg

安装和使用 ​

js
pnpm i vite-plugin-svg-icons -D

// vite.config.ts
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
// 这里最重要的把svg路径配置进去, 否则会找不到
plugins: [
  createSvgIconsPlugin({
    iconDirs: [path.resolve(__dirname, './src/assets/svg')],
    symbolId: 'icon-[dir]-[name]',
  }),
],

// main.ts
import 'virtual:svg-icons-register'

// 可以使用了
<o-svg name="test" color="blue"></o-svg>
pnpm i vite-plugin-svg-icons -D

// vite.config.ts
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
// 这里最重要的把svg路径配置进去, 否则会找不到
plugins: [
  createSvgIconsPlugin({
    iconDirs: [path.resolve(__dirname, './src/assets/svg')],
    symbolId: 'icon-[dir]-[name]',
  }),
],

// main.ts
import 'virtual:svg-icons-register'

// 可以使用了
<o-svg name="test" color="blue"></o-svg>

基础用法 ​

通常用法 ​

属性 ​

属性名说明类型默认值
prefixsymbol 前缀stringicon
namesvg 图标名称string-
color图标颜色string-
customStyle自定义样式对象object{}
size图标尺寸string / number16px