svg-preview-plugin
说明
因为本人公司很多项目中 svg 文件过多,很难管理,也不知道哪个 svg 文件是干什么的,于是就写了一个 svg-preview-plugin(支持 vite 和 webpack)
大概功能
- 监听传入的路径,实时更新预览页面
- 在预览界面删除文件
- 复制文件名称
- 复制文件路径
- 给每个 svg 做了样式隔离,样式不会互相影响
安装
npm i svg-preview-plugin@latest
参数
- dirPath: Array | String
- 需要预览的 svg 文件夹路径,可以多个路径
- port: number
- 预览网页的端口号
webpack 中的使用
// webpack
const SvgPreview = require('svg-preview-plugin')
module.exports = {
plugins: [
new SvgPreview.WebpackPlugin({
dirPath: path.resolve('src/common/icons/svg'),
port: 3000
})
]
}
vite 中的使用
// vite | rollup
import SvgPreivew from 'svg-preview-plugin'
module.exports = {
plugins: [
new SvgPreview.VitePlugin({
dirPath: path.resolve('src/common/icons/svg'),
port: 3000
})
]
}