推荐一个好用的svg Icon组件unplugin-icons/webpack 配好之后可以随心所欲更改svg的颜色Icons({
scale: 1,
jsx: 'react',
compiler: 'jsx',
customCollections: {
svg: FileSystemIconLoader('./src/assets/icons/svg'),
colour: FileSystemIconLoader('./src/assets/icons/colour')
},
transform(svg, collection) {
const out = svg
.replace(/(<svg[^>]+)(width=['"][^'"]+['"]+)/g, '$1')
.replace(/(<svg[^>]+)(height=['"][^'"]+['"]+)/g, '$1')
.replace(/<svg/, '<svg style="vertical-align: middle;"')
return collection === 'svg'
? out
.replace(/(?<=<path (?!class="not-main")[^>]*)fill="(?!none)[^"]*"/g, 'fill="currentColor"')
.replace(/(?<=<rect (?!class="not-main")[^>]*)(?<=(stroke|fill)=)"(?!none)[^"]*"/g, '"currentColor"')
: out
}
}),
展开
评论