How to use the svg-sprite-loader/lib/utils.stringifySymbol function in svg-sprite-loader

To help you get started, we’ve selected a few svg-sprite-loader examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github cyrilwanner / next-optimized-images / svg-runtime-generator.js View on Github external
module.exports = ({ symbol, config, context, loaderContext }) => {
  const { spriteModule, symbolModule } = config;

  const spriteRequest = stringifyRequest({ context }, spriteModule);
  const symbolRequest = stringifyRequest({ context }, symbolModule);

  return `
    import React from 'react';
    import SpriteSymbol from ${symbolRequest};
    import sprite from ${spriteRequest};

    const symbol = new SpriteSymbol(${stringifySymbol(symbol)});
    sprite.add(symbol);

    const SvgSpriteIcon = function SvgSpriteIcon(props) {
      return React.createElement(
        'svg',
        Object.assign({
          viewBox: symbol.viewBox,
        }, props),
        React.createElement(
          'use',
          {
            xlinkHref: '#' + symbol.id,
          }
        )
      );
    };
github JetBrains / ring-ui / icon-runtime-generator.js View on Github external
module.exports = ({symbol, config, context}) => {
  const {spriteModule, symbolModule} = config;

  const spriteRequest = stringifyRequest({context}, spriteModule);
  const symbolRequest = stringifyRequest({context}, symbolModule);
  const displayName = `${pascalCase(symbol.id)}Icon`;
  const glyph = `#${symbol.id}`;

  return `
    import SpriteSymbol from ${symbolRequest};
    import sprite from ${spriteRequest};
    import {iconHOC} from '@jetbrains/ring-ui/components/icon/icon';

    var symbol = new SpriteSymbol(${stringifySymbol(symbol)});
    sprite.add(symbol);

    export default iconHOC('${glyph}', '${displayName}');
    export function toString() {
      return '${glyph}';
    };
  `;
};