vbenjs / vite-plugin-svg-icons Goto Github PK

View Code? Open in Web Editor NEW

787.0 787.0 105.0 527 KB

Vite Plugin for fast creating SVG sprites.

License: MIT License

HTML 2.45% TypeScript 84.95% Vue 8.89% Shell 3.72%

vite-plugin-svg-icons's People

Contributors

Stargazers

Watchers

Forkers

ygunoil akai007 hr837 brktbelete lcgfly yangmi0829 xunsukeji szueric hubert-he yufengkz doctorfei sleiphur williamyorkl trendingtechnology helkim adleader sunjianxu amanisky leaderli swaylq srr3 guwengo wwwk cll123456 freretigre zhangrenyang yzkzm fzq1998 waitingallday vueleague canvascat linghaosu jfs007 madebyoutloud goodmartian kinimail nrodev tonokim sheremet-va 4fork enchpench digitalacorn lphal tangdaoyuan lipy-0805 tyaqing simfantasy timmaier lip8up rockwc zxuanhong zhuomingliang dyh-1226 zhen-one vovsemenv parmery appflow-ai liar0320 geloosa 507228905 aheadcn zppeter hamflx norah1to hhy5277 laynce felixranesberger felix0917 piniatop exia390 lightgh-zhs gdgmphs 343058360 546292681lh cn-xufei wenliangzhou wlim33 anglewangwang helloworld-zw xdd-wyx vytenissidabras leaf-pikachu alvinjstu youthug ljwzz wangxu9999 salimbensiali 0w3w0 disorrder yangxu52 north-city w18701660942 haijiaoliuhao91 oneyoung19 frankfang owocc yvontre voltra shheilansc delonakc

vite-plugin-svg-icons's Issues

The packaged svg and the original svg rendering are inconsistent

I have a svg file, like this:

Open directly in the browser：

But when I package with plugin：
<symbol fill="none" viewBox="0 0 24 24" id="icon-picture"> <path fill-rule="evenodd" clip-rule="evenodd" d="M11.709 9.802a3.14 3.14 0 0 0 3.136 3.135 3.14 3.14 0 0 0 3.135-3.135 3.14 3.14 0 0 0-3.135-3.136 3.14 3.14 0 0 0-3.136 3.136Zm1.445.002c0-.933.76-1.691 1.69-1.691.932 0 1.692.758 1.692 1.69a1.692 1.692 0 0 1-3.382 0Zm2.59 2.848a2.995 2.995 0 0 0 2.09-2.85 2.993 2.993 0 1 0-.002 0 2.995 2.995 0 0 1-2.087 2.85Zm-1.459-4.6a1.839 1.839 0 1 0 0 0Z" fill="#000" fill-opacity=".75"></path> </symbol>

It is look like:

Color of svg changed.

I have a svg file called menu-more.svg

<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="50" height="50" fill="#353A58"/>
<path d="M17 18H33" stroke="#F2F4FA" stroke-width="2" stroke-linecap="round"/>
<path d="M17 25H33" stroke="#F2F4FA" stroke-width="2" stroke-linecap="round"/>
<path d="M17 32H33" stroke="#F2F4FA" stroke-width="2" stroke-linecap="round"/>
</svg>

It used to be like this

But when i import this with the plugin, it shows like this

Color of path changed. How it happens.

manualChunks generates different files

For each build sprite is different.

vite.config.js

    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.startsWith('virtual:svg-icons-')) {
            return 'sprite';
          }

The reason is:
SVG_DOM_ID = '__svg__icons__dom__' + new Date().getTime()

I think it shoudn't be date based on build time.

Can't traverse iconDirs recursively

My iconDirs is [path.resolve(__dirname, 'src/assets/svgs')]
I can get icon like this

but if there are sub directories in folder src/assets/svgs, I can't get icon

How to support React？

无法一个svgIcon组件动态更改图标

vite base 添加前缀后，import 'vite-plugin-svg-icons/register' 404

fast-glob issue

when upgrading from eslint 7 to eslint 8, I ran into an issue with this library requiring fast-glob, and it not being in dependencies. I didn't see that the install instructions indicated that fast-glob needed to be installed. So it was throwing errors when compiling. Perhaps put fast-glob into dependencies so that it will work with setups without other libraries including fast-glob

vue2.x用vite启动使用该插件不起作用

怎么修改svg的颜色呢？

请问怎么修改svg的颜色呢？传入color值并不起作用

打包后在ie中无效

使用vue2项目，打包后，在ie中页面可以显示，图标没有.但是在chrome中，页面和图标都有

chrome的效果如下：

ie的效果如下：

dai代码仓库： https://github.com/cll123456/rouyi-cloud-vue3/tree/vue2-Composition

Different svgoOptions plugins for 2 different icons directories

I'm trying to apply different svgoOptions plugins sets on 2 different icon folders.
Any way I can set a plugin set for a specific folder, path or filename?
I thought about something like:

plugins: [
    {
      name: 'preset-default',
      path: path.resolve(process.cwd(), 'src/assets/svg-icons/set1')
      params: {
        overrides: {
          inlineStyles: {
            onlyMatchedOnce: false,
          }
          removeDoctype: false,
        },
      },
    },
   {
      name: 'anotherPlugin',
      path: path.resolve(process.cwd(), 'src/assets/svg-icons/set2')
    },
  ],

I hope that preset-default would be applied on icons in the set1 folder only, and "otherPlugin" should be applied on icons in set2 directory

SSR: Failed to load module: virtual:svg-icons-register

Hi, I got some trouble rendering icons using vite-plugin-svg-icons on a vue/vite project with ssr.

On development, it's returning : Error: failed to load module for ssr: virtual:svg-icons-register

This bug showed up after the release 0.6.0 I think

Here is a reproducible repo > https://github.com/MewenLr/vite-ssr-svgIcons-error

version 1.1.0 changelog

Hi,
A new release (v1.1.0) was published on NPM 4 days ago.

However, this repository has no commits for one month.
What the release v1.1.0 contains ? Can you update the CHANGELOG.md?

Thanks!

SSR Cannot find module 'vite-plugin-svg-icons/register'

vite-plugin-svg-icons version: ^0.5.0

main.js

// svg
import 'vite-plugin-svg-icons/register';

vite.config.js

plugins: [
        createVuePlugin({ jsx: true }),
        viteSvgIcons({
            iconDirs: [path.resolve(process.cwd(), 'src/assets/editor-svg')],
            symbolId: '[name]',
            svgoOptions: {
                plugins: ['removeDoctype', 'removeComments', 'removeMetadata', 'removeTitle', 'removeDesc'],
            },
        }),
    ],

dist/entry-server.js

require("vite-plugin-svg-icons/dist/index");

You can use https://github.com/vitejs/vite/tree/main/packages/playground/ssr-vue to reproduce.

No matching version found for @types/svgo@^2.6.1

ERR_PNPM_NO_MATCHING_VERSION No matching version found for @types/svgo@^2.6.1

The latest release of @types/svgo is "2.6.0".

Issues with peer dependencies found

There is a warning message after npm install:

 WARN  Issues with peer dependencies found
.
└─┬ vite-plugin-svg-icons
  └─┬ svg-baker
    └─┬ postcss-prefix-selector
      └── ✕ unmet peer postcss@"7.x || 8.x": found 5.2.18

virtual:svg-icons-names 的使用有例子吗, 我这边引入报错很奇怪

CORS issue

Hi, first of all, thanks for the plugin!

Unfortunately, in dev mode I'm getting a CORS error for import "vite-plugin-svg-icons/register";:

Access to script at 'http://craft-starter-2021.nitro:2170/@id/vite-plugin-svg-icons/register' from origin 'http://craft-starter- 2021.nitro' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I'm using vite with a traditional CMS, so vite only serves as an asset server on a different port than the CMS site. This is not a problem with vite since it can be configured to allow all origins via https://vitejs.dev/config/#server-cors.

Perhaps you could add such a setting to this plugin, too - or use the server.cors setting from the vite config if that makes sense?

the content obtained by parsing the wrong svg file is undefined, can be considered for optimization, thks!

Vesion: 1.1.0
Problem Description ： The content obtained by parsing the wrong svg file is undefined, and continue to execute downward to report an error.
Error Screenshot

Insert before closing Body Tag

Sprites can get pretty large. Is it possible to explore the idea of changing the place that the sprite is inserted? Currently, it's in the opening Body Tag. If possible I would love an option to move it to before closing Body Tag.

Ref: https://github.com/anncwb/vite-plugin-svg-icons/blob/fe09334b4dddf49fc96ce045f27ae08892fa4f36/src/index.ts#L149

UnhandledPromiseRejectionWarning: TypeError: (0 , _svgbaker2.default) is not a constructo

vite-plugin-svg-icons： 1.0.2

无法更改svg的样式

发现生成雪碧图后的svg，修改其样式并不会生效

svgoOptions plugins not working

I am trying to apply plugin convertColors with currentColors enabled so that icons would respect the color of parent, but I have not been successful.

The inline styles in SVG gets shrunk from eq. #333333 -> #333 if the svgoOptions is set to true or object but other than that I have yet gotten any other results with the passed options object

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import viteSvgIcons from 'vite-plugin-svg-icons';
const { extendDefaultPlugins } = require('svgo');

const path = require('path');

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    viteSvgIcons({
      iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
      symbolId: 'icon-[dir]-[name]',
      svgoOptions: {
        plugins: extendDefaultPlugins([
          {
            name: 'convertColors',
            params: { currentColor: true }
          }
        ]),
      },
    }),
  ]
});

引用异常

Error: Cannot find module 'fast-glob' 2.0.1版本会报这个错误

virtual:vite-plugin-svg-icons bundle too large [打包過大]

I've import virtual register in main.ts

but some how when I build in vite, the bundle of virtual:vite-plugin-svg-icons is too large, which caused the build to fail
(about 17M)

but when I checkout other developers' repos, it turned out that the bundle size is only about 100 kb

iconfont can not discerned when use vite-plugin-svg-icons

hello, my old friends, you are so great.
but I meet a problem , i can not certain it is or not i use.
when use vite-plugin-svg-icons, it can not recognition iconfont.js

Support TypeScript

Hey,

So I'd like to have auto-completion on my icon names. A simple solution for that would be to generate a declaration file like icons.d.ts with a simple type:

declare type SvgIcon = 'users' | 'menu-alt' | 'home' | 'library' // ...

And using it in a component:

<script setup lang="ts">
import { computed } from 'vue'

const props = defineProps<{ name: SvgIcon }>() // <-- here
const symbolId = computed(() => `#icon:${props.name.includes(':') ? props.name : `:${props.name}`}`)
</script>

<template>
	<svg aria-hidden="true">
		<use :href="symbolId" />
	</svg>
</template>

This approach is taken from some plugin in the ecosystem, like antfu/vite-plugin-components which generates a components.d.ts.

I couldn't find how to use import ids from 'virtual:svg-icons-names' in a plugin to do this myself, so I see no other way than a first-party support.

Version > 1.0.1 occur error: [TypeError: (0 , _svgbaker2.default) is not a constructor]

occur error when the version is 1.0.2

const svgSymbol = await new (0, _svgbaker2.default)().addSymbol({
                          ^

TypeError: (0 , _svgbaker2.default) is not a constructor
    at compilerIcon (/Users/samuelsli/Documents/MiniGame/gamemaker/packages/admin/node_modules/vite-plugin-svg-icons/dist/index.js:5304:27)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async getSymbol (/Users/samuelsli/Documents/MiniGame/gamemaker/packages/admin/node_modules/vite-plugin-svg-icons/dist/index.js:5269:21)
    at async compilerIcons (/Users/samuelsli/Documents/MiniGame/gamemaker/packages/admin/node_modules/vite-plugin-svg-icons/dist/index.js:5281:9)
    at async createModuleCode (/Users/samuelsli/Documents/MiniGame/gamemaker/packages/admin/node_modules/vite-plugin-svg-icons/dist/index.js:5230:33)
    at async /Users/samuelsli/Documents/MiniGame/gamemaker/packages/admin/node_modules/vite-plugin-svg-icons/dist/index.js:5217:35
error Command failed with exit code 1.

the version 1.0.1 is NORMAL

packages 配置地址错误

"bugs": {
"url": "https://github.com/anncwb/vite-plugin-svg-i cons/issues"
},

How to enable svg DOM element generation with vite-ssr

I'm not sure that this is proper place for issue, but I think you can suggest something.

I'm using vite-plugin-svg-icons with vite-ssr and in SSR build mode there is no svg DOM element in dehydrated page.

Enabled JS

Disabled JS

run failed in cjs

// in build.js

const svgIconsPlugin = require('vite-plugin-svg-icons')
const config = defineConfig({
  plugins: [
     vue(),
     vueJsx(),
     configSvgIconsPlugin({
        iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
        svgoOptions: true,
        // default
        symbolId: 'icon-[dir]-[name]',
     })
  ],
})

Can't build in a Nuxt 3 project

Hello!
Thank you for your amazing work. The plugin works perfectly in development but during build I have the following error:

ERROR  Error loading virtual:svg-icons-register: plugin load hook should return a string, a { code, map } object, or nothing/null

I use a Nuxt 3 project with Vite and load the plugin in a plugins/svg-icons.js (because I can't edit the main.ts file) with:

import "virtual:svg-icons-register";

export default defineNuxtPlugin(nuxtApp => {
  // Nothing to do here for the moment...
})

Do you have any ideas?
Thank you!

Internal server error: Failed to resolve import "virtual:svg-icons-register" from "src\main.ts"

有人遇到过这种情况吗，vite-plugin-svg-icons 也装上了，
希望有知道的大佬能给解惑

Ineffective in the vite of vue2 project.

I use the guide step by step write this code.
// vite.config.js
plugins: [createVuePlugin(), createSvgIconsPlugin({
iconDirs: [path.resolve(process.cwd(), 'src/icons/svg')], // this dir have svg icons
symbolId: 'icon-[name]', // this name is correct
}))]

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

but svg icon does'nt show.

安装vite-plugin-svg-icons时依赖冲突想运行vue-vben-admin框架时

我一个个测试在安装vite-plugin-svg-icons时报错

依赖如下
"dependencies": {
"@ant-design/colors": "^6.0.0",
"@ant-design/icons-vue": "^6.0.1",
"@iconify/iconify": "^2.1.1",
"@logicflow/core": "^1.0.7",
"@logicflow/extension": "^1.0.7",
"@vue/runtime-core": "^3.2.29",
"@vue/shared": "^3.2.29",
"@vueuse/core": "^7.5.4",
"@vueuse/shared": "^7.5.4",
"@zxcvbn-ts/core": "^1.2.0",
"ant-design-vue": "3.0.0-beta.8",
"axios": "^0.25.0",
"codemirror": "^5.65.1",
"cropperjs": "^1.5.12",
"crypto-js": "^4.1.1",
"dayjs": "^1.10.7",
"echarts": "^5.2.2",
"intro.js": "^4.3.0",
"lodash-es": "^4.17.21",
"mockjs": "^1.1.0",
"nprogress": "^0.2.0",
"path-to-regexp": "^6.2.0",
"pinia": "2.0.9",
"print-js": "^1.6.0",
"qrcode": "^1.5.0",
"qs": "^6.10.3",
"resize-observer-polyfill": "^1.5.1",
"rollup": "2.66.1",
"showdown": "^1.9.1",
"sortablejs": "^1.14.0",
"tinymce": "^5.10.2",
"vditor": "^3.8.11",
"vue": "^3.2.29",
"vue-i18n": "^9.1.9",
"vue-json-pretty": "^1.8.2",
"vue-router": "^4.0.12",
"vue-types": "^4.1.1",
"xlsx": "^0.17.5"
},
"devDependencies": {
"@commitlint/cli": "^16.1.0",
"@commitlint/config-conventional": "^16.0.0",
"@purge-icons/generated": "^0.7.0",
"@types/codemirror": "^5.60.5",
"@types/crypto-js": "^4.1.0",
"@types/fs-extra": "^9.0.13",
"@types/inquirer": "^8.1.3",
"@types/intro.js": "^3.0.2",
"@types/jest": "^27.4.0",
"@types/lodash-es": "^4.17.5",
"@types/mockjs": "^1.0.6",
"@types/node": "^17.0.10",
"@types/nprogress": "^0.2.0",
"@types/qrcode": "^1.4.2",
"@types/qs": "^6.9.7",
"@types/showdown": "^1.9.4",
"@types/sortablejs": "^1.10.7",
"@typescript-eslint/eslint-plugin": "^5.10.0",
"@typescript-eslint/parser": "^5.10.0",
"@vitejs/plugin-legacy": "^1.6.4",
"@vitejs/plugin-vue": "^2.1.0",
"@vitejs/plugin-vue-jsx": "^1.3.3",
"@vue/compiler-sfc": "3.2.29",
"@vue/test-utils": "^2.0.0-rc.18",
"autoprefixer": "^10.4.2",
"cross-env": "^7.0.3",
"dotenv": "^14.2.0",
"eslint": "^8.7.0",
"eslint-config-prettier": "^8.3.0",
"eslint-define-config": "^1.2.3",
"eslint-plugin-jest": "^25.7.0",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-vue": "^8.3.0",
"esno": "^0.14.0",
"fs-extra": "^10.0.0",
"husky": "^7.0.4",
"inquirer": "^8.2.0",
"jest": "^27.4.7",
"less": "^4.1.2",
"lint-staged": "12.3.1",
"npm-run-all": "^4.1.5",
"postcss": "^8.4.5",
"postcss-html": "^1.3.0",
"postcss-less": "^6.0.0",
"prettier": "^2.5.1",
"rimraf": "^3.0.2",
"rollup-plugin-visualizer": "^5.5.4",
"stylelint": "^14.3.0",
"stylelint-config-html": "^1.0.0",
"stylelint-config-prettier": "^9.0.3",
"stylelint-config-recommended": "^6.0.0",
"stylelint-config-standard": "^24.0.0",
"stylelint-order": "^5.0.0",
"ts-jest": "^27.1.3",
"ts-node": "^10.4.0",
"typescript": "^4.5.5",
"vite": "^2.8.0-beta.3",
"vue-tsc": "^0.31.1",
"vite-plugin-compression": "^0.4.0",
"vite-plugin-html": "^2.1.2",
"vite-plugin-vue-setup-extend": "^0.3.0",
"vite-plugin-windicss": "^1.6.3",
"vue-eslint-parser": "^8.2.0",
"vite-plugin-mkcert": "^1.5.2",
"vite-plugin-mock": "^2.9.6",
"vite-plugin-purge-icons": "^0.7.0",
"vite-plugin-style-import": "^1.4.1",
"vite-plugin-theme": "^0.8.1",

"vite-plugin-pwa": "^0.11.13",

"vite-plugin-svg-icons": "^1.1.0"
},
"resolutions": {
"bin-wrapper": "npm:bin-wrapper-china"
},

在iconfont下载的svg, 无法改变颜色.

从iconfont下载的svg:
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="48px" height="48.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#333333" d="M512 992C246.912 992 32 777.088 32 512 32 246.912 246.912 32 512 32c265.088 0 480 214.912 480 480 0 265.088-214.912 480-480 480z m0-64c229.76 0 416-186.24 416-416S741.76 96 512 96 96 282.24 96 512s186.24 416 416 416z" /><path fill="#333333" d="M256 544a32 32 0 0 1 0-64h512a32 32 0 0 1 0 64H256z" /><path fill="#333333" d="M480 256a32 32 0 0 1 64 0v512a32 32 0 0 1-64 0V256z" /></svg>

其他配置安装官网教程配置后
其中使用代码, 将color="#fff" 添加在SvgIcon中:

通过控制台查看在浏览器的代码:
主键的颜色的确变#fff

但是最关键的是, 最开始路径中的fill 并没有改变

在控制台手动更改路劲下的fill, 图标颜色会变成白色的

Generating multiple sprites

While the default case of putting all the svgs into a single sprite and always including it on the page makes a lot of sense for something like an icon set used throughout your app, ideally I'd like to be able to generate multiple sprites for different sets of svgs and include them on specific pages. For example, you may have a set of large svgs used only on a specific landing page.

I'm happy to play around with it and open a PR, but curious if you have any thoughts about this use case and what the config settings should look like.

font-size 无效

svg设置font-size无效

Cache dont update after modifying svg file

can not use svg with linearGradient

want
svgDom.style.display = 'none' => svgDom.style.position = 'absolute'

[symbolId] 当设置 symbolId 为 icon-[name] 时，最后得到的symbolId中仍含有文件夹名称

比如icons文件结构如下：

icons
├── icon2.svg
└── dir
    └── icon1.svg

symbolId 为 icon-[name] 时，icon1最后得到的id为 icon-dir/icon1，期望得到 icon-icon1

vite-plugin-svg-icons/packages/core/src/index.ts

Lines 260 to 270 in 7550357

 let fName = name 

 const { fileName = '', dirName } = discreteDir(name) 

 if (symbolId.includes('[dir]')) { 

 id = id.replace(/\[dir\]/g, dirName) 

 if (!dirName) { 

 id = id.replace('--', '-') 

 } 

 fName = fileName 

 } 

 id = id.replace(/\[name\]/g, fName)

how to use this plugin in libary mode of vite

I guess it's because of the import 'virtual:svg-icons-register' line of code in main.js, which is the entrance of vue project, the component library built under vite's library mode doesn't display the svg icon properly. Maybe it's because I didn't import vite-plugin-svg-icons in the new project, but I don't want to import it either, because the library component shouldn't be a separate library?

Does anyone have a solution? Thanks in advance!

vite + ts打包时报错Cannot read property 'replace' of undefined

[vite:svg-icons] Could not load D:/IdeaProjects/blog/vue3-vite-ts-blog/index.html: Cannot read property 'replace' of undefined
error during build:
TypeError: Could not load D:/IdeaProjects/blog/vue3-vite-ts-blog/index.html: Cannot read property 'replace' of undefined
at compilerIcon (D:\IdeaProjects\blog\vue3-vite-ts-blog\node_modules\vite-plugin-svg-icons\dist\index.js:5316:21)
at async getSymbol (D:\IdeaProjects\blog\vue3-vite-ts-blog\node_modules\vite-plugin-svg-icons\dist\index.js:5282:21)
at async compilerIcons (D:\IdeaProjects\blog\vue3-vite-ts-blog\node_modules\vite-plugin-svg-icons\dist\index.js:5294:9)
at async createModuleCode (D:\IdeaProjects\blog\vue3-vite-ts-blog\node_modules\vite-plugin-svg-icons\dist\index.js:5233:33)
at async Object.load (D:\IdeaProjects\blog\vue3-vite-ts-blog\node_modules\vite-plugin-svg-icons\dist\index.js:5203:31)
at async D:\IdeaProjects\blog\vue3-vite-ts-blog\node_modules\rollup\dist\shared\rollup.js:22176:83
at async Queue.work (D:\IdeaProjects\blog\vue3-vite-ts-blog\node_modules\rollup\dist\shared\rollup.js:21759:32)

NPM Install - 3 moderate severity vulnerabilities

3 moderate severity vulnerabilities

# npm audit report

postcss  <7.0.36
Severity: moderate
Regular Expression Denial of Service in postcss - https://github.com/advisories/GHSA-566m-qj78-rww5
fix available via `npm audit fix --force`
Will install [email protected], which is a breaking change
node_modules/svg-baker/node_modules/postcss
  svg-baker  >=1.2.5
  Depends on vulnerable versions of postcss
  node_modules/svg-baker
    vite-plugin-svg-icons  >=0.1.1
    Depends on vulnerable versions of svg-baker
    node_modules/vite-plugin-svg-icons

Add single "xmlns" for "svg" element instead of for each symbol

It's not required to set xmlns for each symbol if they are the same.

We can optimize:

  <svg style="position: absolute; width: 0px; height: 0px;">
    <symbol id="hello" viewBox="0 0 24 24"  xmlns="http://www.w3.org/2000/svg" >
      <path d="..." />
    </symbol>
    <symbol id="mad" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" >
      <path d="..." />
    </symbol>
    <symbol id="world" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" >
      <path d="..." />
    </symbol>
  </svg>

into this:

  <svg xmlns="http://www.w3.org/2000/svg"  style="position: absolute; width: 0px; height: 0px;">
    <symbol id="hello" viewBox="0 0 24 24">
      <path d="..." />
    </symbol>
    <symbol id="mad" viewBox="0 0 24 24">
      <path d="..." />
    </symbol>
    <symbol id="world" viewBox="0 0 24 24">
      <path d="..." />
    </symbol>
  </svg>

How to use it in es6?

vite+react svg配置不起作用

vite 2.6.13 [email protected]
配置

组件

使用

icon位置

不起作用显示不出来

如果`svgoOptions`配置成false会怎么样?

我试了一下，貌似没有什么其他反应。因为VbenAdmin中该值被配置成了isBuild。所以svgoOptions配置成false会怎么样的?

icon size problem

halo,icon cannot customize size, There is a layer of boxes on icon. Can you help me?

	let fName = name

	const { fileName = '', dirName } = discreteDir(name)
	if (symbolId.includes('[dir]')) {
	id = id.replace(/\[dir\]/g, dirName)
	if (!dirName) {
	id = id.replace('--', '-')
	}
	fName = fileName
	}
	id = id.replace(/\[name\]/g, fName)