unplugin-svg-component

English | 中文

unplugin-svg-component 启发于vite-plugin-svg-icons,它将本地的svg文件生成为一个 vue/react 组件, 通过该组件结合svg文件的名称使用svg图标。

智能提示效果

Vue

React

功能

• 智能提示: 使用组件时, 配合 Typescript 会提示出 svg 文件名称
• 热更新: svg 文件的增删改操作, 都会实时显示于页面上, 无需刷新浏览器
• Vue & React 支持: 自动检测项目类型
• Tree-shaking: 从v0.5.0版本开始, 生产环境只会打包你用到的 svg 图标
• SSR: 通过开启 option.domInsertionStrategy = 'replaceHtml' 这个选项(默认开启)支持SSR.

安装

yarn add unplugin-svg-component -D
# or
npm i unplugin-svg-component -D
# or
pnpm install unplugin-svg-component -D

使用

Vite config

// vite.config.ts
import UnpluginSvgComponent from 'unplugin-svg-component/vite'

export default defineConfig({
  plugins: [
    UnpluginSvgComponent({ /* options */ })
  ],
})

Vue-cli config

// vue.config.js
const { defineConfig } = require('@vue/cli-service')
const UnpluginSvgComponent = require('unplugin-svg-component/webpack').default

module.exports = defineConfig({
  configureWebpack: {
    plugins: [
      UnpluginSvgComponent({ /* options */ })
    ]
  }
})

Webpack config

// webpack.config.js
const UnpluginSvgComponent = require('unplugin-svg-component/webpack').default

module.exports = {
  /* ... */
  plugins: [
    UnpluginSvgComponent({ /* options */ }),
  ],
}

Rollup config

// rollup.config.js
import UnpluginSvgComponent from 'unplugin-svg-component/rollup'

export default {
  plugins: [
    UnpluginSvgComponent({ /* options */ }),
  ],
}

Esbuild config

// esbuild.config.js
import { build } from 'esbuild'
import UnpluginSvgComponent from 'unplugin-svg-component/esbuild'

build({
  /* ... */
  plugins: [
    UnpluginSvgComponent({
      /* options */
    }),
  ],
})

Vue

// main.ts
import SvgIcon from '~virtual/svg-component'

app.component(SvgIcon.name, SvgIcon)

React

// App.tsx
import SvgIcon from '~virtual/svg-component'

function App() {
  return (



      <SvgIcon name="icon-react"></SvgIcon>



  )
}

获取svgNames / 类型 SvgName

// all svg icon name
import { svgNames } from '~virtual/svg-component'

// type SvgName = "icon-icon-addUser" | "icon-icon-barCode"
import type { SvgName } from '~virtual/svg-component'

插件配置

Typescript 支持

// tsconfig.json
{
  "include": ["svg-component.d.ts", "svg-component-global.d.ts"]
}

最佳实践

可以根据需求参考examples, 注意 examples 中的配置都是默认配置.

Contributing

1. Fork (https://github.com/Jevon617/unplugin-svg-component/fork)
2. 新建一个分支 (git checkout -b feature/fooBar)
3. 提交你的代码 (git commit -am 'Add some fooBar')
4. 提交到你的远程分支 (git push origin feature/fooBar)
5. 提交PR

License

MIT License © 2022-PRESENT Jevon617