Linux command
svgr 命令
文本
复制后可按需替换文件名、目录或参数。
常用示例
Convert SVG to React
svgr [icon.svg]
Output to file
svgr [icon.svg] -o [Icon.jsx]
Convert directory
svgr [icons/] -d [components/]
With TypeScript
svgr --typescript [icon.svg]
As named export
svgr --export-type named [icon.svg]
With custom template
svgr --template [template.js] [icon.svg]
说明
svgr transforms SVG files into React components, generating JSX code that can be imported and used directly in React applications. This eliminates the need to manage separate SVG asset files and enables dynamic styling and prop-based customization of icons and illustrations. The tool supports TypeScript output with proper type definitions, named and default exports, and various component patterns. Batch conversion processes entire directories of SVG files into a component library with an automatic index file. Custom templates control the exact shape of generated component code. SVGR integrates with webpack, Rollup, and other bundlers as a loader/plugin, and also works as a standalone CLI or Node.js API. It optionally runs SVGO optimization before generating components.
参数
- -o _FILE_
- Output file.
- -d _DIR_
- Output directory.
- --typescript
- TypeScript output.
- --export-type _TYPE_
- Export style.
- --template _FILE_
- Custom template.
- --icon
- Icon mode (1em size).
FAQ
What is the svgr command used for?
svgr transforms SVG files into React components, generating JSX code that can be imported and used directly in React applications. This eliminates the need to manage separate SVG asset files and enables dynamic styling and prop-based customization of icons and illustrations. The tool supports TypeScript output with proper type definitions, named and default exports, and various component patterns. Batch conversion processes entire directories of SVG files into a component library with an automatic index file. Custom templates control the exact shape of generated component code. SVGR integrates with webpack, Rollup, and other bundlers as a loader/plugin, and also works as a standalone CLI or Node.js API. It optionally runs SVGO optimization before generating components.
How do I run a basic svgr example?
Run `svgr [icon.svg]` in a terminal, then adjust file names, paths, flags, or remote targets for your system.
What does -o _FILE_ do in svgr?
Output file.