unplugin-svg-component

English | 中文

unplugin-svg-component inspired by vite-plugin-svg-icons, it will generate a Vue/React component through SVG files, use the SVG icon through the component.

IDE Intelligent

Vue

React

Features

• intelligent: When using components, the name of the SVG file will be prompted with Typescript
• HMR: HMR for svg file
• Vue & React: Support Vue&React and automatically detect project types.
• Tree-shaking: Only bundle the icons you really use since v0.5.0.

Installation

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

Usage

// vite.config.ts
import { defineConfig } from 'vite'
import UnpluginSvgComponent from 'unplugin-svg-component/vite'
export default defineConfig({
  plugins: [
    UnpluginSvgComponent({ /* options */ }),
  ],
})

// 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.js
const UnpluginSvgComponent = require('unplugin-svg-component/webpack').default

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

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

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

// 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 (
    <div className="logo">
      <SvgIcon name='icon-react'></SvgIcon>
    </div>
  )
}

Plugin Configuration

| Parameter | Type | Default | Description | | ----------- | ---------------------- | --------------------- | ------------ | | iconDir | string | - | the icon folder of the Sprite image | | projectType | vue \| react \| auto | auto | the project type, detect automatically | | dts | boolean | - | whether generate d.ts file | | dtsDir | string | - | d.ts location | | prefix | string | - | symbolId prefix | | componentName | string | SvgIcon | the name of component | | componentStyle | string | width: 1em; height: 1em; fill:currentColor; | the style of component | | preserveColor |RegExp | - | usually, the plugin will set SVG's fill and stroke with 'currentColor', this option will perform regular matching on each SVG path, the successfully matched SVG will not do the replacement, but retain the original color. | | symbolIdFormatter | (svgName:string, prefix: string)=>string | look this way | the symbolId's formatter | | optimizeOptions | SvgoOptions | - | svgo optimize Options | | svgSpriteDomId | string | svg_sprite__dom | Customize the ID of the svgDom | | vueVersion | 2 \| 3 \| auto | auto | Vue version | | scanGlob | string[] | look this way | the glob pattern used in tree-shaking |

Typescript support

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

Best Practices

You can refer to examples as required. Note that the configuration in examples is the default configuration.

Contributing

1. Fork it (https://github.com/Jevon617/unplugin-svg-component/fork)
2. Create your feature branch (git checkout -b feature/fooBar)
3. Commit your changes (git commit -am 'Add some fooBar')
4. Push to the branch (git push origin feature/fooBar)
5. Create a new Pull Request

License

MIT License © 2022-PRESENT Jevon617