shift73k/assets_old/node_modules/svg-sprite-loader/examples/custom-runtime-generator
2022-08-13 07:32:36 -04:00
..
build progress on migrating to heex templates and font-icons 2022-08-13 07:32:36 -04:00
demo.html progress on migrating to heex templates and font-icons 2022-08-13 07:32:36 -04:00
icon.jsx progress on migrating to heex templates and font-icons 2022-08-13 07:32:36 -04:00
main.jsx progress on migrating to heex templates and font-icons 2022-08-13 07:32:36 -04:00
README.md progress on migrating to heex templates and font-icons 2022-08-13 07:32:36 -04:00
svg-to-icon-component-runtime-generator.js progress on migrating to heex templates and font-icons 2022-08-13 07:32:36 -04:00
webpack.config.js progress on migrating to heex templates and font-icons 2022-08-13 07:32:36 -04:00

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