svg图标组件

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

Hidden Title

基础用法：<s-svg icon="icon_file-cloud-line"></s-svg>

属性事件插槽简介

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

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

安装和使用

pnpmbunnpm

pnpm i vite-plugin-svg-icons -D

pnpm i vite-plugin-svg-icons -D

bun add vite-plugin-svg-icons -d

bun add vite-plugin-svg-icons -d

npm install vite-plugin-svg-icons -D

npm install 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'

// 可以使用了
<s-svg icon="test" color="blue"></s-svg>

// 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'

// 可以使用了
<s-svg icon="test" color="blue"></s-svg>

基础用法

通常用法

属性

属性名	说明	类型	默认值
`prefix`	symbol 前缀	string	`icon`
`icon`	svg 图标名称	string	-
`color`	图标颜色	string	-
`customStyle`	自定义样式对象	object	`{}`
`size`	图标尺寸	string / number	`16px`

svg图标组件 ​

Hidden Title ​

属性事件插槽简介 ​

安装和使用 ​

基础用法 ​

通常用法 ​

属性 ​