craco-plugin-svg-sprite

craco-plugin-svg-sprite

craco-plugin for creatin SVG sprites.

Motivation: How to use SVG sprites in a project.

prerequisite

You have to learn what SVG sprites.

• 未来必热：SVG Sprites技术介绍

then,Learn how to use SVGO to compress SVG.

• SVG精简压缩工具svgo简介和初体验

Finally, summarize the application in the project

• 手摸手，带你优雅的使用 icon

Three package involved：

• svg-sprite-loader
• svgo-loader
• svgo

Usage

npm install craco-plugin-svg-sprite --save-dev

... or with Yarn

yarn add craco-plugin-svg-sprite -D

Configuration

// craco.config.js   => plugins
const cracoPluginSvgSprite = require("craco-plugin-svg-sprite");

{
    plugin: cracoPluginSvgSprite,
    options: {
        include: "src",                 // required
        compress: true,                 // option
        svgoConfig: {                   // option

        },
        spriteLoaderConfig: {           // option

        },
        svgPrefixName: "icon"           // option
    },
}

configuration parameter:

Property	Description	Type	Default	Option
include	files to include	string	-	required
svgPrefixName	svg file prefix name	string	-	option
compress	is a svgo used	boolean	true	option
svgoConfig	svgo-loader config	object	-	option
spriteLoaderConfig	svg-sprite-loader config	object	-	option

reference

在 create-react-app 创建的项目中使用 svg-sprite-loader

Changelog

v1.0.0 (2020-12-18 16:02:45)

publish time 2020-12-18

Initial project