diff --git a/babel.config.js b/babel.config.js index 4cfa36aa032..3fca74b3326 100644 --- a/babel.config.js +++ b/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' ] }; diff --git a/package.json b/package.json index 892e03d8014..aa4b6ca05b2 100644 --- a/package.json +++ b/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", diff --git a/packages/buttons/src/views/icon-button/IconButton.example.md b/packages/buttons/src/views/icon-button/IconButton.example.md index 2fbab3bc69e..e725a458adb 100644 --- a/packages/buttons/src/views/icon-button/IconButton.example.md +++ b/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; diff --git a/packages/buttons/src/views/icon-button/__snapshots__/ChevronButton.spec.js.snap b/packages/buttons/src/views/icon-button/__snapshots__/ChevronButton.spec.js.snap index 9a67658aa4d..d5520d40c42 100644 --- a/packages/buttons/src/views/icon-button/__snapshots__/ChevronButton.spec.js.snap +++ b/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} > - + `; @@ -26,12 +21,7 @@ exports[`ChevronButton rotates icon if prop is provided 1`] = ` - + `; diff --git a/packages/chrome/src/containers/AccordionContainer.example.md b/packages/chrome/src/containers/AccordionContainer.example.md index e875bbfd704..a808b81038a 100644 --- a/packages/chrome/src/containers/AccordionContainer.example.md +++ b/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); diff --git a/packages/chrome/src/views/Chrome.example.md b/packages/chrome/src/views/Chrome.example.md index 0302aec142e..a2075c105a6 100644 --- a/packages/chrome/src/views/Chrome.example.md +++ b/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', diff --git a/packages/chrome/src/views/body/Sidebar.example.md b/packages/chrome/src/views/body/Sidebar.example.md index 302ff9a911a..23d674d0a6e 100644 --- a/packages/chrome/src/views/body/Sidebar.example.md +++ b/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; diff --git a/packages/chrome/src/views/header/Header.example.md b/packages/chrome/src/views/header/Header.example.md index 0b5371552d5..f6860f60f81 100644 --- a/packages/chrome/src/views/header/Header.example.md +++ b/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 diff --git a/packages/chrome/src/views/nav/NavItem.example.md b/packages/chrome/src/views/nav/NavItem.example.md index dc07c81ea84..cf54fae9690 100644 --- a/packages/chrome/src/views/nav/NavItem.example.md +++ b/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 }) => (