Merge pull request #571 from Panenco/fix/remove-inject-icons

fix: remove inject icons major

.storybook/main.js

@@ -21,8 +21,9 @@ module.exports = {
     });
 
     config.module.rules.push({
-      test: /\.svg$/,
-      loader: require.resolve('svg-sprite-loader'),
+      test: /\.svg$/i,
+      issuer: /\.[jt]sx?$/,
+      use: [require.resolve('@svgr/webpack')],
     });
 
     return config;

.storybook/webpack.config.js

@@ -21,9 +21,9 @@ module.exports = {
         use: ['babel-loader', 'ts-loader'],
       },
       {
-        test: /\.svg$/,
-        exclude: [paths.publicFiles],
-        loader: 'svg-sprite-loader',
+       test: /\.svg$/i,
+        issuer: /\.[jt]sx?$/,
+        use: ['@svgr/webpack'],
       },
       {
         test: /\.css$/,

README.md

@@ -27,21 +27,16 @@ Peer dependencies:
 To start importing and using components in your project, you need the following:
 
 - Import css of **Panenco UI** from `@panenco/ui/lib/styles.css`. It could be any way of global import of styles into your project. For instance, using `import` in js with a proper loader or using `@import` in your `css`.
-- Include Panenco UI icons by importing `@panenco/ui/lib/spritesheet.svg` as a file (to obtain its URL and be able to inject it to DOM asynchronously) and pass it to the `injectIcons` function as shown below.
 - Wrap your application with the `ThemeProvider` component from `styled-components` and pass the theme to it.
 
 ```javascript
 import React from 'react';
 import { render } from 'react-dom';
 import AppContainers from 'containers';
 import { ThemeProvider } from 'styled-components';
-import { injectIcons } from '@panenco/ui';
 import { theme } from './theme';
 
 import '@panenco/ui/lib/styles.css';
-import svgSprite from '!file-loader!@panenco/ui/lib/spritesheet.svg';
-
-injectIcons(svgSprite);
 
 const App = () => (
   <ThemeProvider theme={theme}>

package.json

@@ -56,7 +56,6 @@
     "@babel/preset-typescript": "^7.15.0",
     "@commitlint/cli": "^17.0.0",
     "@commitlint/config-conventional": "^17.0.0",
-    "@panenco/rollup-plugin-svg-sprite": "^1.0.3",
     "@rollup/plugin-alias": "^4.0.0",
     "@rollup/plugin-babel": "^6.0.0",
     "@rollup/plugin-commonjs": "^24.0.0",
@@ -73,13 +72,14 @@
     "@storybook/react": "^6.5.16",
     "@storybook/storybook-deployer": "^2.8.16",
     "@storybook/testing-library": "^0.0.13",
+    "@svgr/rollup": "^6.5.1",
+    "@svgr/webpack": "5.5.0",
     "@types/classnames": "^2.2.10",
     "@types/react": "^17.0.19",
     "@types/react-dom": "^17.0.9",
     "@types/react-router-dom": "^5.1.8",
     "@types/react-select": "^3.0.11",
     "@types/styled-components": "^5.1.26",
-    "@types/svg-sprite-loader": "^3.9.2",
     "@types/uuid": "^9.0.0",
     "@typescript-eslint/eslint-plugin": "^5.12.0",
     "@typescript-eslint/parser": "^5.12.0",
@@ -132,9 +132,6 @@
     "stylelint-config-idiomatic-order": "^9.0.0",
     "stylelint-config-standard": "^29.0.0",
     "stylelint-order": "^6.0.0",
-    "svg-sprite-loader": "^6.0.11",
-    "svgo": "^3.0.0",
-    "svgo-loader": "^4.0.0",
     "terser-webpack-plugin": "^5.0.0",
     "ts-loader": "^9.0.0",
     "tsconfig-paths-webpack-plugin": "^4.0.0",

rollup.config.mjs

@@ -1,5 +1,4 @@
 /* eslint-disable global-require */
-import svgSprite from '@panenco/rollup-plugin-svg-sprite';
 import path from 'path';
 import babel from '@rollup/plugin-babel';
 import commonjs from '@rollup/plugin-commonjs';
@@ -9,6 +8,7 @@ import resolve from '@rollup/plugin-node-resolve';
 import replace from '@rollup/plugin-replace';
 import typescript from 'rollup-plugin-typescript2';
 import ttypescript from 'ttypescript';
+import svgr from '@svgr/rollup';
 
 import packageJson from './package.json' assert { type: 'json' };
 import paths from './config/paths.js';
@@ -22,6 +22,7 @@ export default {
     format: 'esm',
   },
   plugins: [
+    svgr(),
     replace({
       preventAssignment: true,
       'process.env.NODE_ENV': JSON.stringify('production'),
@@ -46,10 +47,6 @@ export default {
     }),
     commonjs(),
     json(),
-    svgSprite({
-      outputFolder: paths.outputPath,
-      spriteFilename: 'spritesheet.svg',
-    }),
   ],
   external,
 };

src/components/icon/index.tsx

@@ -7,9 +7,9 @@ import { StyledSVG } from './style';
 import { defaultIcons } from './icons';
 
 const sizeToPx = {
-  sm: '16px',
-  md: '24px',
-  lg: '28px',
+  sm: 16,
+  md: 24,
+  lg: 28,
 };
 
 export type IconProps<T extends { lg: any; md: any; sm: any }> = {
@@ -37,21 +37,20 @@ export const withIcons =
         { icon = 'eye', className, strokeWidth = 1.33, onClick, size = 'md', disabled, width, height, ...iconProps },
         ref,
       ): React.ReactElement<unknown, string | React.JSXElementConstructor<any>> => {
-        const iconToRender = icons[size][icon] || icons.sm[icon] || icons.md[icon] || icons.lg[icon];
+        const IconToRender = icons[size][icon] || icons.sm[icon] || icons.md[icon] || icons.lg[icon];
 
         return (
           <StyledSVG
+            as={IconToRender}
             className={cx(disabled && 'disabled', 'svg', className)}
-            viewBox={iconToRender.viewBox}
-            width={width || sizeToPx[size]}
-            height={height || sizeToPx[size]}
+            viewBox={`0 0 ${sizeToPx[size]} ${sizeToPx[size]}`}
+            width={width || `${sizeToPx[size]}px`}
+            height={height || `${sizeToPx[size]}px`}
             strokeWidth={strokeWidth}
             onClick={onClick}
             ref={ref}
             {...iconProps}
-          >
-            <use xlinkHref={`#${iconToRender.id}`} />
-          </StyledSVG>
+          />
         );
       },
     );

src/utils/helpers/index.ts

@@ -1,3 +1,2 @@
 export * from './id-generator';
-export * from './injectIcons';
 export * from './size-to-string';