add svgr

Author: Agney

package-lock.json

@@ -56,6 +56,7 @@
     "@storybook/addon-links": "^6.0.21",
     "@storybook/addons": "^6.0.21",
     "@storybook/react": "^6.0.21",
+    "@svgr/rollup": "^5.4.0",
     "@types/react": "^16.9.49",
     "@types/react-dom": "^16.9.8",
     "babel-loader": "^8.1.0",

package.json

@@ -2,7 +2,5 @@ export { useLoading } from './useLoading';
 export { LoaderProvider } from './LoaderContext';
 
 // Loaders
-export { Audio } from './loaders/Audio';
-export { BallTriangle } from './loaders/BallTriangle';
-export { Bars } from './loaders/Bars';
-export { Circles } from './loaders/Circles';
+export { default as Audio } from './svg-loaders/audio.svg';
+export { default as BallTriangle } from './svg-loaders/ball-triangle.svg';

src/index.tsx

@@ -0,0 +1,4 @@
+declare module "*.svg" {
+  const content: any;
+  export default content;
+}

src/loaders/Audio.tsx

@@ -0,0 +1,8 @@
+const svgr = require('@svgr/rollup').default;
+
+module.exports = {
+  rollup(config) {
+    config.plugins.push(svgr());
+    return config; 
+  },
+};