add
svg
file imports forjsx
elements。
with svg-sprite-loader
- 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
{
"displayName": "Icon",
"propName": "type",
"directory": "/assets/",
"importComponent": false,
}
[
'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"/>);
[
'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"/>);
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 | - |