qv/vue/node_modules/svg-sprite-loader/examples/custom-runtime-generator

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

• webpack.config.js
• svg-to-icon-component-runtime-generator.js

Input

• main.jsx
• icon.jsx

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