History

ffr b5131258d8 第一次提交		2024-04-23 08:05:40 +08:00
..
build	第一次提交	2024-04-23 08:05:40 +08:00
README.md	第一次提交	2024-04-23 08:05:40 +08:00
demo.html	第一次提交	2024-04-23 08:05:40 +08:00
icon.jsx	第一次提交	2024-04-22 22:43:17 +08:00
main.jsx	第一次提交	2024-04-23 08:05:40 +08:00
svg-to-icon-component-runtime-generator.js	第一次提交	2024-04-23 08:05:40 +08:00
webpack.config.js	第一次提交	2024-04-23 08:05:40 +08:00

README.md

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