Skip to content

Instantly share code, notes, and snippets.

@saadshahd
Last active August 7, 2017 22:14
Show Gist options
  • Save saadshahd/d2a5a4b1eb163a62f8b4bc8b0b37a7bc to your computer and use it in GitHub Desktop.
Save saadshahd/d2a5a4b1eb163a62f8b4bc8b0b37a7bc to your computer and use it in GitHub Desktop.
Runtime generator not found
const path = require('path');
const pascalCase = require('pascal-case');
const {stringifyRequest} = require('loader-utils');
const {stringifySymbol, stringify} = require('../../lib/utils');
module.exports = function ({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} />;
}
}
`;
};
{
test: /\.svg$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader'
},
{
loader: 'svg-sprite-loader',
options: {
runtimeGenerator: require.resolve('./svg-to-icon'),
runtimeOptions: {
iconModule: conf.path.src('app/components/icon.js')
}
}
}
]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment