airbnb / babel-plugin-inline-react-svg

A babel plugin that optimizes and inlines SVGs for your React Components.
MIT License
473 stars 92 forks source link

0.5.4 - Plugin creates an `import` statement when creating an export SVGs only file. #78

Closed dwjohnston closed 4 years ago

dwjohnston commented 4 years ago

I have a repro for this issue here:

https://github.com/dwjohnston/babel-inline-react-svg-issue/tree/export-issue

If I create a source file that looks like this:

export {default as CheckboxList} from "./assets/CheckboxList.svg";
export { default as ChevronLeft } from './assets/ChevronLeft.svg';
export { default as ChevronRight } from './assets/ChevronRight.svg';

I will get a lib file like this:

'use strict';

import React from 'react';
Object.defineProperty(exports, "__esModule", {
  value: true
});

var _CheckboxList = function _CheckboxList(props) {
  return React.createElement(
    'svg',
    props,
    React.createElement('path', {
      clipRule: 'evenodd',
      d: 'M4 3.323a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-14a2 2 0 0 0-2-2zm16 2H4v14h16z',
      fillRule: 'evenodd'
    }),
    React.createElement('path', {
      clipRule: 'evenodd',
      d: 'M11 9.323a1 1 0 0 1 1-1h6a1 1 0 1 1 0 2h-6a1 1 0 0 1-1-1zm0 7a1 1 0 0 1 1-1h6a1 1 0 0 1 0 2h-6a1 1 0 0 1-1-1z',
      fillRule: 'evenodd'
    }),
    React.createElement('path', {
      d: 'M6 7.323h3v3H6zm0 7h3v3H6z'
    })
  );
};

The import statement then causing issues for other projects that are importing this code.

dwjohnston commented 4 years ago

This appears to be a dupe of: https://github.com/airbnb/babel-plugin-inline-react-svg/issues/30