feat: migrate to @svgr/webpack

babel.config.js

@@ -18,7 +18,6 @@ module.exports = {
   plugins: [
     '@babel/plugin-transform-object-assign',
     '@babel/plugin-proposal-class-properties',
-    'babel-plugin-inline-react-svg',
     'babel-plugin-styled-components'
   ]
 };

package.json

@@ -31,6 +31,7 @@
     "@babel/plugin-transform-object-assign": "7.2.0",
     "@babel/preset-env": "7.2.0",
     "@babel/preset-react": "7.0.0",
+    "@svgr/webpack": "4.1.0",
     "@types/react": "16.7.12",
     "@zendeskgarden/css-variables": "5.2.1",
     "@zendeskgarden/eslint-config": "7.0.9",
@@ -40,7 +41,6 @@
     "babel-eslint": "10.0.1",
     "babel-jest": "23.6.0",
     "babel-loader": "8.0.4",
-    "babel-plugin-inline-react-svg": "1.0.1",
     "babel-plugin-styled-components": "1.9.2",
     "chalk": "2.4.1",
     "commander": "2.19.0",
@@ -89,7 +89,6 @@
     "stylelint-config-styled-components": "0.1.1",
     "stylelint-order": "2.0.0",
     "stylelint-processor-styled-components": "1.5.1",
-    "svg-react-loader": "0.4.6",
     "uglifyjs-webpack-plugin": "2.0.1",
     "webpack": "4.26.1",
     "webpack-bundle-analyzer": "3.0.3",

packages/buttons/src/views/icon-button/IconButton.example.md

@@ -1,6 +1,6 @@
 ```jsx
-const SettingsIcon = require('svg-react-loader?name=Settings!@zendeskgarden/svg-icons/src/14/settings.svg');
-const AttachmentIcon = require('svg-react-loader?name=Attachment!@zendeskgarden/svg-icons/src/14/attachment.svg');
+const SettingsIcon = require('@zendeskgarden/svg-icons/src/14/settings.svg').default;
+const AttachmentIcon = require('@zendeskgarden/svg-icons/src/14/attachment.svg').default;
 
 <Grid>
   <Row>

packages/buttons/src/views/icon-button/__snapshots__/ChevronButton.spec.js.snap

@@ -7,12 +7,7 @@ exports[`ChevronButton renders IconButton with correct default styling 1`] = `
   pill={false}
 >
   <Icon>
-    <ChevronDownIcon
-      height="16"
-      viewBox="0 0 16 16"
-      width="16"
-      xmlns="http://www.w3.org/2000/svg"
-    />
+    <MockSVG />
   </Icon>
 </IconButton>
 `;
@@ -26,12 +21,7 @@ exports[`ChevronButton rotates icon if prop is provided 1`] = `
   <Icon
     rotated={true}
   >
-    <ChevronDownIcon
-      height="16"
-      viewBox="0 0 16 16"
-      width="16"
-      xmlns="http://www.w3.org/2000/svg"
-    />
+    <MockSVG />
   </Icon>
 </IconButton>
 `;

packages/chrome/src/containers/AccordionContainer.example.md

@@ -5,7 +5,7 @@ const {
   zdSpacingXs,
   zdColorGrey300
 } = require('@zendeskgarden/css-variables');
-const DownIcon = require('svg-react-loader?name=Down!@zendeskgarden/svg-icons/src/16/chevron-down-fill.svg');
+const DownIcon = require('@zendeskgarden/svg-icons/src/16/chevron-down-fill.svg').default;
 
 const UpIcon = styled(DownIcon)`
   transform: rotate(180deg);

packages/chrome/src/views/Chrome.example.md

@@ -9,15 +9,15 @@ you can programmatically trigger navigation with the `onClick` events.
 
 ```jsx
 const { Toggle, Label } = require('@zendeskgarden/react-toggles/src');
-const ConnectIcon = require('svg-react-loader?name=Settings!@zendeskgarden/svg-icons/src/26/relationshape-connect.svg');
-const HomeIcon = require('svg-react-loader?name=Settings!@zendeskgarden/svg-icons/src/26/home-fill.svg');
-const ListsIcon = require('svg-react-loader?name=Settings!@zendeskgarden/svg-icons/src/26/customer-lists-fill.svg');
-const EmailIcon = require('svg-react-loader?name=Settings!@zendeskgarden/svg-icons/src/26/email-fill.svg');
-const SettingsIcon = require('svg-react-loader?name=Settings!@zendeskgarden/svg-icons/src/26/settings-fill.svg');
-const ZendeskIcon = require('svg-react-loader?name=Settings!@zendeskgarden/svg-icons/src/26/zendesk.svg');
-const PlusIcon = require('svg-react-loader?name=Settings!@zendeskgarden/svg-icons/src/14/plus.svg');
-const MenuTrayIcon = require('svg-react-loader?name=Settings!@zendeskgarden/svg-icons/src/14/menu-tray.svg');
-const PersonIcon = require('svg-react-loader?name=Settings!@zendeskgarden/svg-icons/src/14/person.svg');
+const ConnectIcon = require('@zendeskgarden/svg-icons/src/26/relationshape-connect.svg').default;
+const HomeIcon = require('@zendeskgarden/svg-icons/src/26/home-fill.svg').default;
+const ListsIcon = require('@zendeskgarden/svg-icons/src/26/customer-lists-fill.svg').default;
+const EmailIcon = require('@zendeskgarden/svg-icons/src/26/email-fill.svg').default;
+const SettingsIcon = require('@zendeskgarden/svg-icons/src/26/settings-fill.svg').default;
+const ZendeskIcon = require('@zendeskgarden/svg-icons/src/26/zendesk.svg').default;
+const PlusIcon = require('@zendeskgarden/svg-icons/src/14/plus.svg').default;
+const MenuTrayIcon = require('@zendeskgarden/svg-icons/src/14/menu-tray.svg').default;
+const PersonIcon = require('@zendeskgarden/svg-icons/src/14/person.svg').default;
 
 initialState = {
   currentNavItem: 'home',

packages/chrome/src/views/body/Sidebar.example.md

@@ -1,5 +1,5 @@
 ```jsx
-const TalkIcon = require('svg-react-loader?name=Settings!@zendeskgarden/svg-icons/src/26/relationshape-talk.svg');
+const TalkIcon = require('@zendeskgarden/svg-icons/src/26/relationshape-talk.svg').default;
 
 <Chrome style={{ height: 500 }}>
   <Body>

packages/chrome/src/views/header/Header.example.md

@@ -1,9 +1,9 @@
 ```jsx
 const { Toggle, Label } = require('@zendeskgarden/react-toggles/src');
-const SupportIcon = require('svg-react-loader?name=Settings!@zendeskgarden/svg-icons/src/26/relationshape-support.svg');
-const HelpIcon = require('svg-react-loader?name=Settings!@zendeskgarden/svg-icons/src/14/support.svg');
-const MenuTrayIcon = require('svg-react-loader?name=Settings!@zendeskgarden/svg-icons/src/14/menu-tray.svg');
-const PersonIcon = require('svg-react-loader?name=Settings!@zendeskgarden/svg-icons/src/14/person.svg');
+const SupportIcon = require('@zendeskgarden/svg-icons/src/26/relationshape-support.svg').default;
+const HelpIcon = require('@zendeskgarden/svg-icons/src/14/support.svg').default;
+const MenuTrayIcon = require('@zendeskgarden/svg-icons/src/14/menu-tray.svg').default;
+const PersonIcon = require('@zendeskgarden/svg-icons/src/14/person.svg').default;
 
 initialState = {
   standalone: true

packages/chrome/src/views/nav/NavItem.example.md

@@ -3,19 +3,19 @@
 All product color schemes can be applied with their associated `NavItem` property.
 
 ```jsx
-const SupportIcon = require('svg-react-loader?name=Settings!@zendeskgarden/svg-icons/src/26/relationshape-support.svg');
-const ChatIcon = require('svg-react-loader?name=Settings!@zendeskgarden/svg-icons/src/26/relationshape-chat.svg');
-const ConnectIcon = require('svg-react-loader?name=Settings!@zendeskgarden/svg-icons/src/26/relationshape-connect.svg');
-const GuideIcon = require('svg-react-loader?name=Settings!@zendeskgarden/svg-icons/src/26/relationshape-guide.svg');
-const TalkIcon = require('svg-react-loader?name=Settings!@zendeskgarden/svg-icons/src/26/relationshape-talk.svg');
-const ExploreIcon = require('svg-react-loader?name=Settings!@zendeskgarden/svg-icons/src/26/relationshape-explore.svg');
-const HomeIcon = require('svg-react-loader?name=Settings!@zendeskgarden/svg-icons/src/26/home-fill.svg');
-const ListsIcon = require('svg-react-loader?name=Settings!@zendeskgarden/svg-icons/src/26/customer-lists-fill.svg');
-const EmailIcon = require('svg-react-loader?name=Settings!@zendeskgarden/svg-icons/src/26/email-fill.svg');
-const SettingsIcon = require('svg-react-loader?name=Settings!@zendeskgarden/svg-icons/src/26/settings-fill.svg');
-const PlusIcon = require('svg-react-loader?name=Settings!@zendeskgarden/svg-icons/src/14/plus.svg');
-const MenuTrayIcon = require('svg-react-loader?name=Settings!@zendeskgarden/svg-icons/src/14/menu-tray.svg');
-const PersonIcon = require('svg-react-loader?name=Settings!@zendeskgarden/svg-icons/src/14/person.svg');
+const SupportIcon = require('@zendeskgarden/svg-icons/src/26/relationshape-support.svg').default;
+const ChatIcon = require('@zendeskgarden/svg-icons/src/26/relationshape-chat.svg').default;
+const ConnectIcon = require('@zendeskgarden/svg-icons/src/26/relationshape-connect.svg').default;
+const GuideIcon = require('@zendeskgarden/svg-icons/src/26/relationshape-guide.svg').default;
+const TalkIcon = require('@zendeskgarden/svg-icons/src/26/relationshape-talk.svg').default;
+const ExploreIcon = require('@zendeskgarden/svg-icons/src/26/relationshape-explore.svg').default;
+const HomeIcon = require('@zendeskgarden/svg-icons/src/26/home-fill.svg').default;
+const ListsIcon = require('@zendeskgarden/svg-icons/src/26/customer-lists-fill.svg').default;
+const EmailIcon = require('@zendeskgarden/svg-icons/src/26/email-fill.svg').default;
+const SettingsIcon = require('@zendeskgarden/svg-icons/src/26/settings-fill.svg').default;
+const PlusIcon = require('@zendeskgarden/svg-icons/src/14/plus.svg').default;
+const MenuTrayIcon = require('@zendeskgarden/svg-icons/src/14/menu-tray.svg').default;
+const PersonIcon = require('@zendeskgarden/svg-icons/src/14/person.svg').default;
 
 const ProductNav = ({ title, icon, ...other }) => (
   <Nav>

packages/menus/src/containers/MenuContainer.example.md

@@ -61,7 +61,7 @@ for (let x = 1; x <= 5; x++) {
 
 ```jsx
 const { Button, Icon } = require('@zendeskgarden/react-buttons/src');
-const SettingsIcon = require('svg-react-loader?name=Settings!@zendeskgarden/svg-icons/src/14/settings.svg');
+const SettingsIcon = require('@zendeskgarden/svg-icons/src/14/settings.svg').default;
 
 initialState = {
   selectedKey: 'Unknown'
@@ -273,7 +273,7 @@ initialState = {
 const { KEY_CODES } = require('@zendeskgarden/react-selection/src');
 const { Button } = require('@zendeskgarden/react-buttons/src');
 const { Input, FauxInput, MediaFigure } = require('@zendeskgarden/react-textfields/src');
-const SearchIcon = require('svg-react-loader?name=Settings!@zendeskgarden/svg-icons/src/14/search.svg');
+const SearchIcon = require('@zendeskgarden/svg-icons/src/14/search.svg').default;
 
 const natoPhonetics = [
   'Alfa',

packages/menus/src/views/items/Item.example.md

@@ -35,7 +35,7 @@ const InlineMenuView = styled(MenuView)`
 ### Types
 
 ```jsx
-const GroupIcon = require('svg-react-loader?name=Settings!@zendeskgarden/svg-icons/src/14/group.svg');
+const GroupIcon = require('@zendeskgarden/svg-icons/src/14/group.svg').default;
 
 /**
  * Only necessary to position within documentation

packages/select/src/views/Dropdown.example.md

@@ -35,7 +35,7 @@ const InlineSelectView = styled(Dropdown)`
 ### Types
 
 ```jsx
-const GroupIcon = require('svg-react-loader?name=Settings!@zendeskgarden/svg-icons/src/14/group.svg');
+const GroupIcon = require('@zendeskgarden/svg-icons/src/14/group.svg').default;
 
 /**
  * Only necessary to position within documentation

packages/tables/src/examples/draggable-table.md

@@ -9,7 +9,7 @@ This example includes:
 ```jsx
 const { zdSpacingSm } = require('@zendeskgarden/css-variables');
 const { DragDropContext, Droppable, Draggable } = require('react-beautiful-dnd');
-const GripIcon = require('svg-react-loader?name=Settings!@zendeskgarden/svg-icons/src/12/grip.svg');
+const GripIcon = require('@zendeskgarden/svg-icons/src/12/grip.svg').default;
 const { XL } = require('@zendeskgarden/react-typography/src');
 
 const DraggableRow = styled(Row)`

packages/tags/src/views/Avatar.example.md

@@ -4,7 +4,7 @@ their styling to any element they are provided.
 `Avatars` are hidden for small `Tags`.
 
 ```jsx
-const PersonIcon = require('svg-react-loader?name=Settings!@zendeskgarden/svg-icons/src/14/person.svg');
+const PersonIcon = require('@zendeskgarden/svg-icons/src/14/person.svg').default;
 
 <Grid>
   <Row>

packages/textfields/src/views/MediaFigure.example.md

@@ -2,8 +2,8 @@ The `FauxInput[mediaLayout=true]` can be used with the `MediaFigure` and `MediaI
 components to include icons within the input.
 
 ```jsx
-const SearchIcon = require('svg-react-loader?name=Settings!@zendeskgarden/svg-icons/src/14/search.svg');
-const SettingsIcon = require('svg-react-loader?name=Attachment!@zendeskgarden/svg-icons/src/14/settings.svg');
+const SearchIcon = require('@zendeskgarden/svg-icons/src/14/search.svg').default;
+const SettingsIcon = require('@zendeskgarden/svg-icons/src/14/settings.svg').default;
 
 <FauxInput mediaLayout>
   <MediaFigure>

utils/build/webpack.base.js

@@ -68,6 +68,21 @@ found at http://www.apache.org/licenses/LICENSE-2.0
           }
         ]
       },
+      {
+        test: /\.svg$/u,
+        use: [
+          {
+            loader: '@svgr/webpack',
+            options: {
+              svgoConfig: {
+                plugins: {
+                  removeViewBox: false
+                }
+              }
+            }
+          }
+        ]
+      },
       {
         test: /\.css?$/u,
         exclude: /@zendeskgarden\/css/u,

utils/styleguide/styleguide.base.config.js

@@ -169,8 +169,18 @@ const defaultStyleguideConfig = {
         },
         {
           test: /\.svg$/u,
-          exclude: /node_modules/u,
-          loader: 'svg-react-loader'
+          use: [
+            {
+              loader: '@svgr/webpack',
+              options: {
+                svgoConfig: {
+                  plugins: {
+                    removeViewBox: false
+                  }
+                }
+              }
+            }
+          ]
         },
         {
           test: /\.md$/u,

utils/test/jest.config.js

@@ -22,7 +22,8 @@ module.exports = {
   moduleNameMapper: {
     '\\.(css|json)$': 'identity-obj-proxy',
     '@zendeskgarden/css': 'identity-obj-proxy',
-    '@zendeskgarden/react-testing': '<rootDir>/packages/testing/src/index.js'
+    '@zendeskgarden/react-testing': '<rootDir>/packages/testing/src/index.js',
+    '\\.(svg)$': '<rootDir>/utils/test/svg-mock.js'
   },
   collectCoverageFrom: [
     '<rootDir>/packages/*/src/**/*.{js,jsx}',

utils/test/svg-mock.js

@@ -0,0 +1,12 @@
+/**
+ * Copyright Zendesk, Inc.
+ *
+ * Use of this source code is governed under the Apache License, Version 2.0
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
+ */
+
+import React from 'react';
+
+const MockSVG = () => <span>SVG</span>;
+
+export default MockSVG;