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
    })
  ]
}