build-react-icons
v0.2.1
Published
The tool generates SVG React component for a set of svg icons
Downloads
10
Readme
The tool generates ES6 React components for a set of svg icons
build-react-icon based on material-ui icons builder
Features
- Optimize and clean SVG to use on web
- Create React components
Get Started
yarn add build-react-icons
build-react-icons --svg-dir icons --output-dir src
Advanced usage and Custom builds
yarn build-react-icons --help
can be used to display the options available for building.
--output-dir, -o
- Directory to output generated components. [required]--svg-dir, -s
- Directory containing the source SVG icons. [default: "src"]--inner-path
- "Reach into" subdirs, since libraries like material-design-icons use arbitrary build directories to organize icons, e.g. "action/svg/production/".--file-suffix
- Process only files ending with the specified suffix/--glob
- Glob to match inside of --svg-dir [default: "/**/*.svg"]--rename-filter
- Apply a custom filter to rename the generated icons.--icon-worker
- File that accept each icon and should return it back.--new
- Create files only for new icons.
If you experience any issues building icons or would like a feature added, file an issue and let us know.
Rename filter example
yarn build-react-icons -s icons --rename-filter ./scripts/filter
const defaultFilter = require('build-react-icons/dist/utils/renameFilters/default').default;
/**
* @param file parsed with [path.parse()](https://nodejs.org/api/path.html#path_path_parse_path)
* @param innerPath
* @param config provided arguments
* @returns string
*/
exports.default = ({ base, ...rest }, innerPath, config) => {
return defaultFilter({ ...rest, base: base.replace('Svg', '') }, innerPath, config);
}
Icon worker example
yarn build-react-icons -s icons --icon-worker ./scripts/filter
exports.default = icon => icon.replace(/ fill="#010101"/g, '')