How to use svg-sprite-loader - 10 common examples

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.

JetBrains / svg-sprite-loader / examples / server-side-rendering / main.js View on Github

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

// Import sprite instance which already contains twitter logo required above
import sprite from 'svg-sprite-loader/runtime/sprite.build';

// Render sprite
const spriteContent = sprite.stringify();

const pageContent = `






${spriteContent}

<svg viewBox="${symbol.viewBox}">
  
</svg>


`;

zuzucheFE / guido / lib / utils / svgSpriteRuntimeGenerator.js View on Github

let runtime;
	let symbolId = symbol.id.replace('--sprite', '');

	if (extract) {
		const spritePlaceholder = generateSpritePlaceholder(
			symbol.request.file
		);
		const publicPath = stringify(publicPath) || '__webpack_public_path__';

		const viewBoxParts = symbol.viewBox.split(' ');
		const width = parseInt(viewBoxParts[2], 10);
		const height = parseInt(viewBoxParts[3], 10);

		const data = `{
            id: ${stringify(symbolId)},
            viewBox: ${stringify(symbol.viewBox)},
            url: ${publicPath} + ${stringify(spritePlaceholder)},
            width: ${width},
            height: ${height},
            toString: function () {
                return this.url;
            }
        }`;

		runtime = generateExport(data, esModule);
	} else {
		const spriteModuleAbsPath = path.isAbsolute(spriteModule)
			? spriteModule
			: path.join(context, spriteModule);
		const symbolModuleAbsPath = path.isAbsolute(symbolModule)
			? symbolModule

zuzucheFE / guido / lib / utils / svgSpriteRuntimeGenerator.js View on Github

extract,
		esModule,
		spriteModule,
		symbolModule,
		runtimeCompat,
		publicPath,
	} = config;

	let runtime;
	let symbolId = symbol.id.replace('--sprite', '');

	if (extract) {
		const spritePlaceholder = generateSpritePlaceholder(
			symbol.request.file
		);
		const publicPath = stringify(publicPath) || '__webpack_public_path__';

		const viewBoxParts = symbol.viewBox.split(' ');
		const width = parseInt(viewBoxParts[2], 10);
		const height = parseInt(viewBoxParts[3], 10);

		const data = `{
            id: ${stringify(symbolId)},
            viewBox: ${stringify(symbol.viewBox)},
            url: ${publicPath} + ${stringify(spritePlaceholder)},
            width: ${width},
            height: ${height},
            toString: function () {
                return this.url;
            }
        }`;

zuzucheFE / guido / lib / config / svg-sprite-runtime-generator.js View on Github

let runtime;
    let symbolId = symbol.id.replace('--sprite', '');

    if (extract) {
        const spritePlaceholder = generateSpritePlaceholder(symbol.request.file);
        const publicPath = loaderContext._compiler.options.output.publicPath;

        const viewBoxParts = symbol.viewBox.split(' ');
        const width = parseInt(viewBoxParts[2], 10);
        const height = parseInt(viewBoxParts[3], 10);

        const data = `{
      id: ${stringify(symbolId)},
      viewBox: ${stringify(symbol.viewBox)},
      url: ${publicPath} + ${stringify(spritePlaceholder)},
      width: ${width},
      height: ${height}
    }`;

        runtime = generateExport(data, esModule);
    } else {
        const spriteModuleImport = stringifyRequest({ context }, spriteModule);
        const symbolModuleImport = stringifyRequest({ context }, symbolModule);

        runtime = [
            generateImport('SpriteSymbol', symbolModuleImport, esModule),
            generateImport('sprite', spriteModuleImport, esModule),
            generateImport('React', 'react', esModule),

            `let symbol = new SpriteSymbol(${stringifySymbol(symbol)})`,
            'sprite.add(symbol)',

zuzucheFE / guido / lib / utils / svgSpriteRuntimeGenerator.js View on Github

let symbolId = symbol.id.replace('--sprite', '');

	if (extract) {
		const spritePlaceholder = generateSpritePlaceholder(
			symbol.request.file
		);
		const publicPath = stringify(publicPath) || '__webpack_public_path__';

		const viewBoxParts = symbol.viewBox.split(' ');
		const width = parseInt(viewBoxParts[2], 10);
		const height = parseInt(viewBoxParts[3], 10);

		const data = `{
            id: ${stringify(symbolId)},
            viewBox: ${stringify(symbol.viewBox)},
            url: ${publicPath} + ${stringify(spritePlaceholder)},
            width: ${width},
            height: ${height},
            toString: function () {
                return this.url;
            }
        }`;

		runtime = generateExport(data, esModule);
	} else {
		const spriteModuleAbsPath = path.isAbsolute(spriteModule)
			? spriteModule
			: path.join(context, spriteModule);
		const symbolModuleAbsPath = path.isAbsolute(symbolModule)
			? symbolModule
			: path.join(context, symbolModule);

zuzucheFE / guido / lib / utils / svgSpriteRuntimeGeneratorNotReact.js View on Github

let runtime;
	let symbolId = symbol.id.replace('--sprite-notrc', '');

	if (extract) {
		const spritePlaceholder = generateSpritePlaceholder(
			symbol.request.file
		);
		const publicPath = stringify(publicPath) || '__webpack_public_path__';

		const viewBoxParts = symbol.viewBox.split(' ');
		const width = parseInt(viewBoxParts[2], 10);
		const height = parseInt(viewBoxParts[3], 10);

		const data = `{
            id: ${stringify(symbolId)},
            viewBox: ${stringify(symbol.viewBox)},
            url: ${publicPath} + ${stringify(spritePlaceholder)},
            width: ${width},
            height: ${height},
            toString: function () {
                return this.url;
            }
        }`;

		runtime = generateExport(data, esModule);
	} else {
		const spriteModuleAbsPath = path.isAbsolute(spriteModule)
			? spriteModule
			: path.join(context, spriteModule);
		const symbolModuleAbsPath = path.isAbsolute(symbolModule)
			? symbolModule

zuzucheFE / guido / lib / config / svg-sprite-runtime-generator.js View on Github

const { extract, esModule, spriteModule, symbolModule, runtimeCompat } = config;

    let runtime;
    let symbolId = symbol.id.replace('--sprite', '');

    if (extract) {
        const spritePlaceholder = generateSpritePlaceholder(symbol.request.file);
        const publicPath = loaderContext._compiler.options.output.publicPath;

        const viewBoxParts = symbol.viewBox.split(' ');
        const width = parseInt(viewBoxParts[2], 10);
        const height = parseInt(viewBoxParts[3], 10);

        const data = `{
      id: ${stringify(symbolId)},
      viewBox: ${stringify(symbol.viewBox)},
      url: ${publicPath} + ${stringify(spritePlaceholder)},
      width: ${width},
      height: ${height}
    }`;

        runtime = generateExport(data, esModule);
    } else {
        const spriteModuleImport = stringifyRequest({ context }, spriteModule);
        const symbolModuleImport = stringifyRequest({ context }, symbolModule);

        runtime = [
            generateImport('SpriteSymbol', symbolModuleImport, esModule),
            generateImport('sprite', spriteModuleImport, esModule),
            generateImport('React', 'react', esModule),

            `let symbol = new SpriteSymbol(${stringifySymbol(symbol)})`,

zuzucheFE / guido / lib / config / svg-sprite-runtime-generator.js View on Github

module.exports = function runtimeGenerator({ symbol, config, context, loaderContext }) {
    const { extract, esModule, spriteModule, symbolModule, runtimeCompat } = config;

    let runtime;
    let symbolId = symbol.id.replace('--sprite', '');

    if (extract) {
        const spritePlaceholder = generateSpritePlaceholder(symbol.request.file);
        const publicPath = loaderContext._compiler.options.output.publicPath;

        const viewBoxParts = symbol.viewBox.split(' ');
        const width = parseInt(viewBoxParts[2], 10);
        const height = parseInt(viewBoxParts[3], 10);

        const data = `{
      id: ${stringify(symbolId)},
      viewBox: ${stringify(symbol.viewBox)},
      url: ${publicPath} + ${stringify(spritePlaceholder)},
      width: ${width},
      height: ${height}
    }`;

        runtime = generateExport(data, esModule);
    } else {
        const spriteModuleImport = stringifyRequest({ context }, spriteModule);
        const symbolModuleImport = stringifyRequest({ context }, symbolModule);

        runtime = [
            generateImport('SpriteSymbol', symbolModuleImport, esModule),
            generateImport('sprite', spriteModuleImport, esModule),
            generateImport('React', 'react', esModule),

zuzucheFE / guido / lib / config / svg-sprite-runtime-generator.js View on Github

const spritePlaceholder = generateSpritePlaceholder(symbol.request.file);
        const publicPath = loaderContext._compiler.options.output.publicPath;

        const viewBoxParts = symbol.viewBox.split(' ');
        const width = parseInt(viewBoxParts[2], 10);
        const height = parseInt(viewBoxParts[3], 10);

        const data = `{
      id: ${stringify(symbolId)},
      viewBox: ${stringify(symbol.viewBox)},
      url: ${publicPath} + ${stringify(spritePlaceholder)},
      width: ${width},
      height: ${height}
    }`;

        runtime = generateExport(data, esModule);
    } else {
        const spriteModuleImport = stringifyRequest({ context }, spriteModule);
        const symbolModuleImport = stringifyRequest({ context }, symbolModule);

        runtime = [
            generateImport('SpriteSymbol', symbolModuleImport, esModule),
            generateImport('sprite', spriteModuleImport, esModule),
            generateImport('React', 'react', esModule),

            `let symbol = new SpriteSymbol(${stringifySymbol(symbol)})`,
            'sprite.add(symbol)',
        ];

        let rcDisplayName = `${pascalCase(symbolId)}SpriteSymbolComponent`;
        runtime.push(
            `export default function ${rcDisplayName}(props) {

zuzucheFE / guido / lib / utils / svgSpriteRuntimeGeneratorNotReact.js View on Github

const viewBoxParts = symbol.viewBox.split(' ');
		const width = parseInt(viewBoxParts[2], 10);
		const height = parseInt(viewBoxParts[3], 10);

		const data = `{
            id: ${stringify(symbolId)},
            viewBox: ${stringify(symbol.viewBox)},
            url: ${publicPath} + ${stringify(spritePlaceholder)},
            width: ${width},
            height: ${height},
            toString: function () {
                return this.url;
            }
        }`;

		runtime = generateExport(data, esModule);
	} else {
		const spriteModuleAbsPath = path.isAbsolute(spriteModule)
			? spriteModule
			: path.join(context, spriteModule);
		const symbolModuleAbsPath = path.isAbsolute(symbolModule)
			? symbolModule
			: path.join(context, symbolModule);

		const spriteModuleImport = stringifyRequest(
			loaderContext,
			spriteModuleAbsPath
		);
		const symbolModuleImport = stringifyRequest(
			loaderContext,
			symbolModuleAbsPath
		);

How to use svg-sprite-loader - 10 common examples

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

svg-sprite-loader

Package Health Score

Popular svg-sprite-loader functions

Similar packages