feat: add option treeShaking

README.md

@@ -159,6 +159,7 @@ function App() {
 | optimizeOptions       | `SvgoOptions` | -          | svgo optimize [Options](https://github.com/svg/svgo) |
 | svgSpriteDomId        | `string`                   | __svg_sprite__dom__                            | Customize the ID of the svgDom                      |
 | vueVersion            | `2 \| 3 \| auto`           | auto                                           | Vue version                                         |
+| treeShaking           | `boolean`                  | false                                          | whether enable tree-shaking                         |
 | scanGlob            | `string[]`           | [look this way](./src/core/utils.ts/#L41)                        |  the glob pattern used in tree-shaking                                          |
 | scanStrategy            | `text \| component \| (code: string[], options: Options)=>string[]`       | component                        |  the strategy used for tree-shaking will not be bundled into the final bundle if it is not successfully matched. The `text` option indicates matching by svg name, so you should ensure the uniqueness of your svg name (you can consider customizing it with the 'symbolIdFormatter' option) to avoid erroneous tree-shaking, while the default value of the `component` option indicates matching by component as a whole, In addition, you can also implement a tree-shaking strategy by passing a function whose return value represents the set of SVG icons used.                                          |
 

README.zh_CN.md

@@ -158,6 +158,7 @@ function App() {
 | optimizeOptions       | `SvgoOptions` | -          |  [svgo 的优化参数](https://github.com/svg/svgo) |
 | svgSpriteDomId        | `string`                   | __svg_sprite__dom__                            | 自定义生成的svg元素的id                                  |
 | vueVersion            | `2 \| 3 \| auto`           | auto                                           | Vue 版本, 默认会自动检测                                  |
+| treeShaking           | `boolean`                  | true                                           | 是否开启tree-shaking                                    |
 | scanGlob            | `string[]`           | [code](./src/core/utils.ts/#L41)                       | 用于 tree-shaking 的模式匹配路径 |
 | scanStrategy            | `text \| component  \| (code: string[], options: Options)=>string[]`           | component                       | 用于 tree-shaking 的模式匹配策略, 未匹配成功则不会打包到最终的产物中去, `text`选项表示按图标名称匹配, 所以你应该保证你图标名称的唯一性(可以考虑用`symbolIdFormatter`选项定制)，以此避免错误的tree-shaking, 而默认值`component`表示的是按组件这一整体进行匹配, 此外你也可以通过传递函数的方式来实现 tree-shaking 策略, 函数的返回值表示用到的 svg 图标合集。|
 

examples/vue3-vite/vite.config.ts

@@ -25,6 +25,7 @@ export default defineConfig({
       optimizeOptions: undefined,
       vueVersion: 3,
       scanStrategy: 'component',
+      treeShaking: true,
     }),
   ],
 })

src/core/index.ts

@@ -9,7 +9,7 @@ import { resolveOptions } from './utils'
 import scanUsedSvgNames from './scan'
 
 let isBuild = false
-let componentCode = ''
+let code = ''
 let svgSpriteDomStr = ''
 let transformPluginContext: any
 let usedSvgNames: string[] | string = []
@@ -19,13 +19,13 @@ const unplugin = createUnplugin<Options>(options => ({
   async buildStart() {
     options = resolveOptions(options)
     // only scan used icons in build
-    if (isBuild)
+    if (isBuild && options.treeShaking)
       usedSvgNames = await scanUsedSvgNames(options)
     else
       usedSvgNames = USED_SVG_NAMES_FLAG
 
     const res = await genCode(options, usedSvgNames, false)
-    componentCode = res.componentCode
+    code = res.code
     svgSpriteDomStr = res.svgSpriteDomStr
   },
   resolveId(id: string) {
@@ -36,7 +36,7 @@ const unplugin = createUnplugin<Options>(options => ({
     return id === MODULE_NAME
   },
   async load() {
-    return componentCode
+    return code
   },
   webpack(compiler) {
     isBuild = compiler.options.mode === 'production'

src/core/utils.ts

@@ -41,6 +41,7 @@ export function resolveOptions(options: Options): Options {
         nameArr.unshift(prefix)
       return nameArr.join('-').replace(/\.svg$/, '')
     },
+    treeShaking: true,
     scanGlob: [
       '**/*.html',
       '**/*.pug',

src/types.ts

@@ -13,6 +13,7 @@ export interface Options {
   optimizeOptions?: OptimizeOptions
   projectType?: 'vue' | 'react' | 'auto'
   vueVersion?: VueVersion
+  treeShaking: boolean
   scanGlob?: string[]
   scanStrategy?: 'text' | 'component' | ((code: string[], options: Options) => string[])
 }