0.4.6 • Published 5 years ago

svg-react-loader v0.4.6

Weekly downloads
178,921
License
MIT
Repository
github
Last release
5 years ago

SVG to React Loader

A Webpack Loader to turn SVGs into React Components

Summary

A webpack loader allowing for inline usage of a SVG as a React component, or for composing individual SVGs into larger ones.

The latest version has been refactored to allow for receiving an SVG/XML string or an JSON object-tree representing an SVG. This allows for other loaders before svg-react to alter/update/remove nodes before reaching svg-react.

In addition, the new filters API allows for additional ways to modify the generated SVG Component. This allows svg-react to also be used as a pre-loader (with filters and raw=true params) for modifying SVGs before they are acted on by the loader version of svg-react.

Notes

As of version 0.4.0, svg-react-loader no longer requires babel to transpile the generated code. Everything is returned as an ES5-7 compatible module, and the component is just a function. With that, it only works with React@>=0.14

Installation

% npm install --save-dev svg-react-loader

Usage

ES6+ (Assuming a babel-loader is used on /\.jsx?$/ files):

import React, { Component } from 'react';
import Icon from 'svg-react-loader?name=Icon!../svg/my-icon.svg';

export default class MyIcon extends Component {
    render () {
        return <Icon className='normal' />;
    }
};

ES5

var React = require('react');
var Icon = require('svg-react-loader?name=Icon!../svg/my-icon.svg');

module.exports = React.createClass({
    render () {
        return React.createElement(Icon, { className: 'normal' });
    }
});

Documentation

Query Params

Query params can be used on the loader path, or on the resource's path. Those on the resource will override those given for the loader.

  • name: displayName to use for the compiled component. Defaults to using the resource's file name, capitalized and camelCased. ex. "?name=MyIcon"

  • tag: Override the root-level tag name.

  • props: Attributes to apply to the root-level tag. If a certain attribute is already assigned to the tag, the value here will override that.

  • attrs: Alias for props

  • filters: If given on the query string, it is a list of module names, or filepaths, to load as filter functions. If given in the webpack config as a svgReactLoader.filters, or as query.filters for the loader configuration object, it is an array of functions.

  • classIdPrefix: A string to prefix all class or id selectors in found style blocks, or within className properties, with. If indicated without a string, the file's basename will be used as a prefix.

  • raw: If set to true will output the parsed object tree repesenting the SVG as a JSON string. Otherwise, returns a string of JavaScript that represents the component's module.

  • propsMap: If given on the query string, it is an array of colon separated propname:translatedname pairs. If given in the webpack configuration as svgReactLoader.propsMap, or in an object query for the loader configuration, is a simple object of propname: 'translatedname'

  • xmlnsTest: A regular expression used to remove non-supported xmlns attributes. Default is /^xmlns(Xlink)?$/

  • titleCaseDelim: A regular expression used to generate component's name. It would be ignore if name was set. Default is /[._-]/

Examples

Webpack 1

// webpack configuration
module: {
    loaders: [
        {
            test: /\.svg$/,
            exclude: /node_modules/,
            loader: 'svg-react-loader',
            query: {
                classIdPrefix: '[name]-[hash:8]__',
                filters: [
                    function (value) {
                        // ...
                        this.update(newvalue);
                    }
                ],
                propsMap: {
                    fillRule: 'fill-rule',
                    foo: 'bar'
                },
                xmlnsTest: /^xmlns.*$/
            }
        }
    ]
}

// Resource paths
import MyIcon from 'svg-react-loader?name=MyIcon!../svg/icon.svg';
import MyIcon from 'svg-react-loader?tag=symbol!../svg/icon.svg';
import MyIcon from 'svg-react-loader?tag=symbol&props[]=id:my-icon?../svg/icon.svg';
import MyIcon from 'svg-react-loader?filters[]=./my-filter.js!../svg/icon.svg';

Webpack 2-3

// webpack configuration
module: {
    loaders: [
        {
            test: /\.svg$/,
            exclude: /node_modules/,
            use: {
                loader: 'svg-react-loader',
                options: {
                    tag: 'symbol',
                    attrs: {
                        title: 'example',
                    },
                    name: 'MyIcon',
                },
            },
        }
    ]
}

// Resource paths
import MyIcon from '../svg/icon.svg';

Object Tree API

Internally, svg-react-loader converts the given SVG/XML into an object tree that looks something like:

{
    "tagname": "svg",
    "props": {
        "xmlns": "http://www.w3.org/2000/svg",
        "xmlns:xlink": "http://www.w3.org/1999/xlink",
        "viewBox": "0 0 16 16",
        "enable-background": "new 0 0 16 16",
        "xml:space": "preserve"
    },
    "children": [
        {
            "tagname": "rect",
            "props": {
                "x": "0",
                "y": "0",
                "width": "16",
                "height": "16",
                "fill": "#fff"
            }
        },
        {
            "tagname": "text",
            "children": ["Foobar"]
        }
    ]
}

It then uses a variety of filters to modify the tree to conform to how React expects to see props, styles, etc...

If svg-react-loader receives a JSON string instead of string of SVG/XML, it expects to receive it in the above format (i.e.: objects with properties 'tagname', 'props', and 'children'). Children is always an array (unless empty), and children can be objects with the mentioned props, or a plain string (for text nodes).

Filters

A filter is just a function that accepts one value, and it has the same this context as the traverse API.

svg-react-loader is really just a series of filters applied to a parsed SVG/XML, or JSON, string and then regenerated as a string to form a React functional component.

Review lib/sanitize/filters for some examples.

Report an Issue

License

MIT

@scentregroup/react-scriptslegacy-svg-components@softbankrobotics/component-lib@quantumblack/carbon-charts@hacktion/test-libraryspr-aero-widget-accordionframework-reactnative-component-libdisprzcomponentssourcecred-for-samudai@infinitebrahmanuniverse/nolb-svg-@redwoodjs/scriptsornikar-michel@everything-registry/sub-chunk-2858@uiflow/cli@descco/ui@b2wads/grimorio-ui@butterjs/scripts@canonic/sdk@callfromweb/scripts@ccg.ai/react-scriptsreact-scripts-and-dipreact-scripts-asset-path-prefixscriptonisdc-uiunift-sdkunift-walletxcim-codesandboxwebcubewi-layer-react-expresstk-logintk-login-devwpi-react-hmr-ssrwts-ui-component-libsuperbuttonsourcecredsourcecred-gitcoin-demosourcecred-publish-teststorybook-v2-testroamjs-scriptsscalable-react-boilerplateslipstream-uiskypager-webpackreact-static-plugin-svg@crisog/sourcecred@dollarshaveclub/react-runtime@dollarshaveclub/react-scripts@hozz/sourcecred@hammerframework/scriptsdoug-app@fixt/fixt-uikit@kaliber/react-bundle@kerberos-io/ui@leandro.medeiros/boiler-plate@mhy/mhy@norceio/core@nowa/solution-legacy@nowa/solution-react@netguru/react-scripts@pavilionius/webpack@jacobmischka/gatsby-plugin-react-svgnetguru-react-scriptsa0swa0swreact-datesa0swreact-datesnext-react-svgmmintel-custom-react-scriptsmmintel-react-scripts@rexlabs/plz-clikr5ftcst@ueno/react-scripts@varius.io/wombofrack-build-config-factorygatsby-theme-massivelygatsby-theme-massively-jlpforked-sourcecredgatsby-plugin-react-svgsgatsby-plugin-react-svggatsby-plugin-svggatsby-theme-editorialoddsmarket-siteonap-uionap-ui-reactmudrex-react-native-design-systembeegru-design-muiblazar-core@onap-sdc/sdc-ui@quantumblack/carbon-uilighticon@sakiz/corekitten-launcherlpack-ts-react-apollolynn-webpackhappy_frontendpalace-botpipe-line-testingpipe-automaternz-testinfiniconfiguration-backofficequip-apps-webpack-configpwln
0.4.6

5 years ago

0.4.5

7 years ago

0.4.4

7 years ago

0.4.3

7 years ago

0.4.2

7 years ago

0.4.1

7 years ago

0.4.0

7 years ago

0.3.7

8 years ago

0.4.0-beta.2

8 years ago

0.4.0-beta.1

8 years ago

0.4.0-beta.0

8 years ago

0.3.6

8 years ago

0.3.5

8 years ago

0.3.4

8 years ago

0.3.3

8 years ago

0.3.2

8 years ago

0.3.1

8 years ago

0.3.0

8 years ago

0.2.0

8 years ago

0.1.5

9 years ago

0.1.4

9 years ago

0.1.3

9 years ago

0.1.2

9 years ago

0.1.1

9 years ago

0.1.0

9 years ago

0.0.0

9 years ago