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