Skip to content

lishaobos/svg-preview-plugin

Repository files navigation

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}" />`
      }
    })
  ]
}