svg-preview-plugin

instructions

Because my company used SVG-Sprite-loader in many projects, I found that there were too many SVG files and it was difficult to manage. I also didn’t know which SVG file was for what purpose, so I wrote an SVG-Preview-plugin

About function

  • Listen for incoming paths to update the preview page in real time
  • Delete files on the preview screen
  • Copy file name
  • Copy file path
  • Each SVG is style-isolated so that styles do not affect each other

The installation

npm i svg-preview-plugin@latest
Copy the code

parameter

  • dirPath: Array | String
    • The path to the SVG folder that you need to preview can be multiple paths
  • port: number
    • Preview the port number of the page

Use in Webpack

const SvgPreviewPlugin = require('svg-preview-plugin')
const path = require('path')


plugins: [
    new SvgPreviewPlugin({
      dirPath: [
        path.resolve('src/common/icons/svg')
      ],
      port: 3000
    })
]
Copy the code