/svg-preview-plugin

更好的预览 svg，支持 webpack，vite

Primary LanguageHTML

svg-preview-plugin

说明：解决项目中 svg 文件过多，不好管理的问题（支持 vite 和 webpack）

功能：

  • 实时预览 svg，动态更新预览内容
  • 复制文件名
  • 复制文件路径
  • 删除文件

use

npm i -D svg-preview-plugin@latest

options

  • dirPath

    • Type: string | array
    • Desc: 预览路径

  • open

    • Type: boolean
    • Default: true
    • Desc: 自动打开预览窗口

  • port

    • Type: number
    • Default: 3000
    • Desc: 预览端口

  • deep

    • Type: boolean
    • Default: false
    • Desc: 是否递归显示 dirPath 里的 svg

  • formatName

    • Type: function
    • Desc: 自定义复制内容

example

// webpack
const { WebpackPlugin } = require('svg-preview-plugin')

module.exports = {
  plugins: [
    new WebpackPlugin({
      dirPath: path.resolve('src/assets/icons/svg'),
      port: 3000,
      deep: true,
      formatName({name, filePath}) {
        return `<MyIcon name="${name}" />`
      }
    })
  ]
}
// vite | rollup
import { VitePlugin } from 'svg-preview-plugin'

module.exports = {
  plugins: [
    VitePlugin({
      dirPath: path.resolve('src/assets/icons/svg'),
      port: 3000,
      deep: true,
      formatName({name, filePath}) {
        return `<MyIcon name="${name}" />`
      }
    })
  ]
}