1.1.1 • Published 12 months ago
react-svg-codegen v1.1.1
Folder structure
- config.iconsFolder
- sprite — icons(.svg) for inline-sprite
- standalone — icons(.svg) for standalone output
Recommended path — src/shared/ui/icons
Limitations: Don't use public
folder
Script
// {ROOT}/scripts/svg-codegen.js
const { generateSVG } = require("react-svg-codegen");
const path = require("path");
generateSVG({
iconsFolder: path.resolve(__dirname, "../src/shared/ui/icons"),
templateFolder: path.resolve(__dirname,"..","node_modules","react-svg-codegen/templates"),
watch: true,
storybook: true
});
Webpack
const { svgConfig } = require('react-svg-codegen/webpack');
module.exports = svgConfig(webpackConfig)
SSR (Next.js)
import { spriteContent } from 'react-svg-codegen/ssr';
<div
style={{ position: 'absolute', width: 0, height: 0 }}
dangerouslySetInnerHTML={{ __html: spriteContent }}
/>
Storybook
// {ROOT}/.storybook/main.js
const { svgConfig } = require('react-svg-codegen/webpack');
module.exports = {
webpackFinal: (config, options) => {
// modify storybook's file-loader rule to avoid conflicts with our svgConfig
const fileLoaderRule = config.module.rules.find((rule) => rule.test?.test?.(".svg"));
fileLoaderRule.exclude = /\.svg$/;
return svgConfig(config);
}
}
Typings
declare module '*.svg?sprite' {
import React = require('react');
const src: React.FC<React.SVGProps<SVGSVGElement>>;
export default src;
}
declare module '*.svg' {
import React = require('react');
const src: React.FC<React.SVGProps<SVGSVGElement>>;
export default src;
}
1.1.1
12 months ago
1.1.0
12 months ago
1.0.5
1 year ago
1.0.0
2 years ago
1.0.4
2 years ago
1.0.3
2 years ago
0.0.19
2 years ago
0.0.18
2 years ago
0.0.17
2 years ago
0.0.16
2 years ago
0.0.15
2 years ago
0.0.14
2 years ago
0.0.13
2 years ago
0.0.12
2 years ago
0.0.11
2 years ago
0.0.10
2 years ago
0.0.9
2 years ago
0.0.8
2 years ago
0.0.7
2 years ago
0.0.6
2 years ago
0.0.5
2 years ago
0.0.4
2 years ago
0.0.3
2 years ago
0.0.2
2 years ago
0.0.1
2 years ago