Skip to content

Commit

Permalink
Implement the SVGR and SVGO configuration files
Browse files Browse the repository at this point in the history
All configurations for SVGR are set in the `svgr.config.js` file instead
of passing them to the corresponding Gatsby plugin for the Webpack
loader.

- `expandProps` = `end` - ensure props are always spread
  (`{...props}`) last on the root `<svg>` element.
- `ext` = `jsx` - use the JSX file extension for generated components.
- `icon` = `false` - ensure the `width` and `height` props (hardcoded
  `1em` value) are not added.
- `ref` = `true` - export components using React's `forwardRef` API to
  reference the underlying component and allow access to the root SVG
  element which is necessary for animations.
- `svgo` = `false` - all SVG files in this project are already
  optimized with SVGO using the included `.svgo.yml` configuration.

The configuration for SVGO is implemented in the `.svgo.yml` file that
is also placed in the project root and will be picked up by SVGO
automatically.

GH-72
  • Loading branch information
arcticicestudio committed Dec 6, 2018
1 parent 10393ed commit 2864994
Show file tree
Hide file tree
Showing 2 changed files with 54 additions and 0 deletions.
17 changes: 17 additions & 0 deletions .svgo.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
# Copyright (C) 2018-present Arctic Ice Studio <[email protected]>
# Copyright (C) 2018-present Sven Greb <[email protected]>
#
# Project: Nord Docs
# Repository: https://github.com/arcticicestudio/nord-docs
# License: MIT

# Configuration for SVGO.
#
# References:
# - https://github.com/svg/svgo
# - https://github.com/svg/svgo/blob/master/.svgo.yml

multipass: true
js2svg:
pretty: true
indent: 2
37 changes: 37 additions & 0 deletions svgr.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
/*
* Copyright (C) 2018-present Arctic Ice Studio <[email protected]>
* Copyright (C) 2018-present Sven Greb <[email protected]>
*
* Project: Nord Docs
* Repository: https://github.com/arcticicestudio/nord-docs
* License: MIT
*/

/**
* @file The SVGR configuration.
* @author Arctic Ice Studio <[email protected]>
* @author Sven Greb <[email protected]>
* @see https://www.smooth-code.com/open-source/svgr/docs/configuration-files
* @see https://www.smooth-code.com/open-source/svgr/docs/options
* @since 0.3.0
*/

module.exports = {
/* Always spread props (`{...props}`) last on the root `<svg>` element. */
expandProps: "end",

/* Use the JSX file extension for generated components. */
ext: "jsx",

/* Don't add the `width` and `height` props (hardcoded `1em` value). */
icon: false,

/*
* Export components using React's `forwardRef` API to reference the underlying component and allow access to the
* root `<svg>` element which is necessary for animations.
*/
ref: true,

/* All SVG files in this project are already optimized with SVGO using the included `.svgo.yml` configuration. */
svgo: false
};

0 comments on commit 2864994

Please sign in to comment.