vite-plugin-svg-transform-script

Vite based SVG information reading plug-in can read iconfont's SVG icon file. It can specify input directory, output directory Output the file name to generate a JS script file containing SVG information. Then you can use them to generate SVG icons.

install

npm i vite-plugin-svg-transform-script

use

1.Put static SVG resource file

You can directly save your SVG file into the assets / icon Folder, Of course, you can also store it in other places, just make the corresponding folder path the most parameter Just pass it on.

2.Write parameter configuration

import {transformScript} from "vite-plugin-svg-transform-script";
export default defineConfig({
  plugins: [
    transformScript({
     input:'../assets/icon/',
     output:'../dist/',
     name:'svg-dict',
     type:'js',
     format:'export'
    })
    ]
  })

3.Restart your vite project

After you have finished configuring, restart the vite project, and the plug-in will automatically read the SVG file under the input path you specified, and generate the SVG file in the output directory you specified Script file of SVG information

// svg-dict.js
export const content1 = <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN".............. '
export const content2 = <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN".............. '

Api

Method name	explain	parameter	return value
transformScript	Generate a script file based on the passed in configuration parameters	ISvgTransScriptOption	void
findSvgFile	Search SVG files in the specified folder according to the incoming parameters	dir:String Svg file path	Array<{name:String,svg:String}> fileName：Humped SVG file name svg:InnerHTML corresponding to SVG file
createFile	Generate SVG script of specified directory according to the passed in parameters	outputPath:String Specified output path fileName:String Specified output file name svgData:Array<{name:String,svg:String} Return value of 'findSvgFile' method	void
loadsvg	Insert the SVG element to the top of the body	svg-dict object generated in default format	void

Interface

ISvgTransScriptOption

key	explain	default value	required
input	Enter the path to your SVG file	-	true
output	Output path, specifying the generated file path	path.resolve()	false
name	Specifies the name of the build file	'svg-dict'	false
type	Specify the type of generated file. Please pass in 'ts' or' js'	'ts'	false
format	Specify the export format. Please enter 'export' or 'default'	'default'	false

other

1.Since the script will generate variables according to the SVG file name, the file name cannot be the keyword of JavaScript, and the file name should use XXX Svg or XXX-YYY Svg format

2.Be sure to pay attention to whether the input and output paths are correct