Administrator eec7f449c9 first commit		пре 4 година
..
build	eec7f449c9 first commit	пре 4 година
README.md	eec7f449c9 first commit	пре 4 година
demo.html	eec7f449c9 first commit	пре 4 година
icon.jsx	eec7f449c9 first commit	пре 4 година
main.jsx	eec7f449c9 first commit	пре 4 година
svg-to-icon-component-runtime-generator.js	eec7f449c9 first commit	пре 4 година
webpack.config.js	eec7f449c9 first commit	пре 4 година

Custom runtime generating example

Runtime code generated by loader could be overridden by providing custom generator via runtimeGenerator option. For example you can return React component preconfigured with imported symbol data instead of default symbol instance.

Demo

Config

Input

This import:

import TwitterIcon from '../assets/twitter.svg';

Will be generated to:

import React from 'react';
import SpriteSymbol from 'svg-sprite-loader/runtime/symbol';
import sprite from 'svg-sprite-loader/runtime/browser-sprite';
import SpriteSymbolComponent from './icon.jsx';

const symbol = new SpriteSymbol({ /* symbol data */ });
sprite.add(symbol);

export default class TwitterIcon extends React.Component {
  render() {
    return <SpriteSymbolComponent glyph="${symbol.id}" {...this.props} />;
  }
}

So when you import SVG, actually React component returns with configured glyph:

import TwitterIcon from '../assets/twitter.svg';

render(
  <div>
    <TwitterIcon width="100" />
    <TwitterIcon fill="red" style={{width: 300}} />
    <TwitterIcon fill="blue" style={{width: 600}} />
  </div>,
  document.querySelector('.app')
);

Output

build/main.js

README.md

Custom runtime generating example

Demo

Config

Input

Output