0.0.4 • Published 5 years ago
babel-plugin-jsx-svg-import v0.0.4
babel-plugin-jsx-svg-import
add
svg
file imports forjsx
elements。with svg-sprite-loader
Function
- There is no need to manually import the
svg
file, which automatically importsvg
in the file. - There is no need to provide a custom
Icon
component, the plugin can automatically import theIcon
component
options
{
"displayName": "Icon",
"propName": "type",
"directory": "/assets/",
"importComponent": false,
}
no use importComponent
[
'babel-plugin-jsx-svg-import',
{
displayName: 'Icon',
propName: 'type',
directory: '/assets/',
},
];
import Icon from './Icon.jsx';
ReactDOM.render(<Icon type="close"/>);
↓ ↓ ↓ ↓ ↓ ↓
import './assets/close.svg'
ReactDOM.render(<Icon type="close"/>);
use importComponent
[
'babel-plugin-jsx-svg-import',
{
displayName: 'Icon',
propName: 'type',
directory: '/assets/',
importComponent: true,
},
];
ReactDOM.render(<Icon type="close"/>);
↓ ↓ ↓ ↓ ↓ ↓
import Icon from 'babel-plugin-jsx-svg-import/lib/runtime';
import './assets/close.svg'
ReactDOM.render(<Icon type="close"/>);
Icon Component
from antd Icon
prop | desc | type | default |
---|---|---|---|
width | svg element width | string | number | '1em' |
height | svg element height | string | number | '1em' |
fill | svg element fill color | string | 'currentColor' |
className | svg element class | string | - |
style | svg element style | CSSProperties | - |