https://github.com/pixel-point/gatsby-plugin-svgr-svgo
Gatsby plugin for SVG usage with react, svgo support
https://github.com/pixel-point/gatsby-plugin-svgr-svgo
gatsby gatsby-plugin react react-svg svg svgo svgr
Last synced: 2 months ago
JSON representation
Gatsby plugin for SVG usage with react, svgo support
- Host: GitHub
- URL: https://github.com/pixel-point/gatsby-plugin-svgr-svgo
- Owner: pixel-point
- Created: 2020-01-08T10:15:35.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-03-04T05:37:17.000Z (over 2 years ago)
- Last Synced: 2025-04-28T13:00:06.873Z (2 months ago)
- Topics: gatsby, gatsby-plugin, react, react-svg, svg, svgo, svgr
- Language: JavaScript
- Homepage:
- Size: 4.35 MB
- Stars: 16
- Watchers: 3
- Forks: 1
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# gatsby-plugin-svgr-svgo
Plugin allows you to use SVGs as react components, configure SVGO(SVG optimization) settings and declare rules for SVG url loader with or without optimization.
[](https://badge.fury.io/js/gatsby-plugin-svgr-svgo)
## Install
For Gatsby 3.0.0+ versions use
```
npm install gatsby-plugin-svgr-svgo @svgr/webpack --save
```
For Gatsby 2.3.0+ versions use
```
npm install [email protected] @svgr/webpack --save
```
For older versions
```
npm install [email protected] @svgr/webpack --save
```
## Setup
### Default configuration
Add to your gatsby-config.js
```js
plugins: [`gatsby-plugin-svgr-svgo`];
```
By default there are two rules will be added:
1. SVG as a react component(inline svg), SVGO enabled for all SVGs that have .inline postfix. Example: `cat.inline.svg`
```js
import React from "react";
import CatInlineSvg from "../images/cat.inline.svg";
const IndexPage = () => (
);
export default IndexPage;
```
2. SVG as a file that available by url, SVGO enabled for all svgs that have `.svg`. Example: `cat.svg`.
```js
import React from "react";
import CatSvg from "../images/cat.svg";
const IndexPage = () => (
);
export default IndexPage;
```
### Advanced configuration
```js
plugins: [
{
resolve: "gatsby-plugin-svgr-svgo",
options: {
inlineSvgOptions: [
{
test: /\.inline.svg$/,
svgoConfig: {
plugins: [
{
name: "preset-default",
params: {
overrides: [{ name: "removeViewBox", active: false }],
},
},
"prefixIds",
],
},
},
],
urlSvgOptions: [
{
test: /\.svg$/,
svgoConfig: {
plugins: [{ name: "removeViewBox", active: false }],
},
},
],
},
},
];
```
You can declare various rules based on loader that should be used under `inlineSvgOptions` and `urlSvgOptions`.
`test` - pattern that will be used to match file name
`svgoConfig` - accepts plugins list with settings, list of available plugins(options) you can find [here](https://github.com/svg/svgo#what-it-can-do)
`svgo` - disables SVGO if set in `false`
### SVGO disabled example
```js
plugins: [
{
resolve: "gatsby-plugin-svgr-svgo",
options: {
urlSvgOptions: [
{
test: /\.svg$/,
svgo: false,
},
],
},
},
];
```
### Set URL loader fallback limit
By default webpack `url-loader` has a fallback to `file-loader` that converts the file from the original extension to base64. Plugins set default as 512 bytes. So if you want to set the limit from which it should be loaded directly from url instead of base64 loading just use limit option within `urlLoaderOptions`.
Limits you set in bytes. Read about more options [there](https://webpack.js.org/loaders/url-loader/)
```js
urlSvgOptions: [
{
test: /\.svg$/,
svgoConfig: {
plugins: [{ name: "removeViewBox", active: false }],
},
urlLoaderOptions: {
limit: 512,
},
},
];
```