Newfangled Package Modernizer

    babel-plugin-jsx-svg-import

    0.0.4 • Public • Published

    babel-plugin-jsx-svg-import

    中文文档

    add svg file imports for jsx elements。

    with svg-sprite-loader

    Function

    • There is no need to manually import the svg file, which automatically import svg in the file.
    • There is no need to provide a custom Icon component, the plugin can automatically import the Icon 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 -

    Install

    npm i babel-plugin-jsx-svg-import

    DownloadsWeekly Downloads

    0

    Version

    0.0.4

    License

    MIT

    Unpacked Size

    24.1 kB

    Total Files

    6

    Last publish

    Collaborators

    • titian