Skip to content

Instantly share code, notes, and snippets.

@vamsiampolu
Created July 5, 2017 18:57
Show Gist options
  • Save vamsiampolu/1686527cb352da5579df300e44c4e9e9 to your computer and use it in GitHub Desktop.
Save vamsiampolu/1686527cb352da5579df300e44c4e9e9 to your computer and use it in GitHub Desktop.
Svg Sprite Loader runtime generator for React Component
const path = require('path');
const pascalCase = require('pascal-case');
const { stringifyRequest } = require('loader-utils');
const { stringifySymbol, stringify } = require('../../lib/utils');
module.exports = function runtimeGenerator({ symbol, config, context, loaderContext }) {
const { spriteModule, symbolModule, runtimeOptions } = config;
const compilerContext = loaderContext._compiler.context;
const iconModulePath = path.resolve(compilerContext, runtimeOptions.iconModule);
const iconModuleRequest = stringify(
path.relative(path.dirname(symbol.request.file), iconModulePath)
);
const spriteRequest = stringifyRequest({ context }, spriteModule);
const symbolRequest = stringifyRequest({ context }, symbolModule);
const parentComponentDisplayName = 'SpriteSymbolComponent';
const displayName = `${pascalCase(symbol.id)}${parentComponentDisplayName}`;
return `
import React from 'react';
import SpriteSymbol from ${symbolRequest};
import sprite from ${spriteRequest};
import ${parentComponentDisplayName} from ${iconModuleRequest};
const symbol = new SpriteSymbol(${stringifySymbol(symbol)});
sprite.add(symbol);
export default class ${displayName} extends React.Component {
render() {
return <${parentComponentDisplayName} glyph="${symbol.id}" {...this.props} />;
}
}
`;
};
{
module: {
rules: [
{
test: /\.svg$/,
use: [
{
loader: 'svg-sprite-loader',
options: {
runtimeGenerator: require.resolve('./svg-to-icon-component-runtime-generator'),
runtimeOptions: {
iconModule: './icon.jsx' // Relative to current build context folder
}
}
}
]
}
]
}
}
@brianfeister
Copy link

@vamsiampolu should require.resolve('./svg-to-icon-component-runtime-generator') be

require.resolve('./svg-to-react-component') instead?

Trying to trace the meaning of the path here and where the file should live

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment