unplugin-svg2icon
v0.1.1
Published
Register global imports on demand for Vite and Webpack
Downloads
1
Readme
unplugin-svg2icon
将svg转换成css图标
安装
npm i unplugin-svg2icon
使用
// vite.config.ts
import Svg2icon from 'unplugin-svg2icon/vite'
export default defineConfig({
plugins: [
Svg2icon({ /* options */ }),
],
})
Example: playground/
// rollup.config.js
import Starter from 'unplugin-svg2icon/rollup'
export default {
plugins: [
Starter({ /* options */ }),
],
}
// webpack.config.js
module.exports = {
/* ... */
plugins: [
require('unplugin-svg2icon/webpack')({ /* options */ })
]
}
// nuxt.config.js
export default {
buildModules: [
['unplugin-svg2icon/nuxt', { /* options */ }],
],
}
This module works for both Nuxt 2 and Nuxt Vite
// vue.config.js
module.exports = {
configureWebpack: {
plugins: [
require('unplugin-svg2icon/webpack')({ /* options */ }),
],
},
}
参数
svgs
: svg 存放地址
outputDir
: 生成的icons.css、index.html
路径,默认是项目根地址
handleSvg
: svg 处理方法,可以在这里自定义操作
cssPrefix
: 生成css的前缀
options 示例
{
svgs: ['./static', './icons/svg/*.svg'],
outputDir: 'assets',
cssPrefix: 'dd',
handleSvg({ svg, file }) {
if (svg.viewBox.width > 100 || svg.viewBox.height > 100) {
return {
width: 24,
height: 24,
}
}
else if (file === 'select_menu_icon') {
return {
isColor: true,
}
}
else if (file === 'all') {
return {
cssProps: {
transform: 'scale(1.5)',
},
}
}
else if (path.includes('static/')) {
return {
cssPrefix: 'static',
}
}
},
}