diff --git a/UNRELEASED.md b/UNRELEASED.md
index 4222b4d38e7..280a8aff0b9 100644
--- a/UNRELEASED.md
+++ b/UNRELEASED.md
@@ -6,6 +6,8 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
### Enhancements
+- Moved icons to a separate NPM package ([#686](https://github.com/Shopify/polaris-react/pull/686))
+
### Bug fixes
- Fixed the new variant of the `Badge` component so that it is simpler and easier to read ([#751](https://github.com/Shopify/polaris-react/pull/751))
diff --git a/package.json b/package.json
index 91bfb899acb..3728d8085d1 100644
--- a/package.json
+++ b/package.json
@@ -172,6 +172,7 @@
"@shopify/app-bridge": "^0.7.3",
"@shopify/images": "^1.1.0",
"@shopify/javascript-utilities": "^2.2.1",
+ "@shopify/polaris-icons": "1.0.0-beta.5",
"@shopify/polaris-tokens": "^2.0.0",
"@shopify/react-compose": "^0.1.6",
"@shopify/react-html": "^3.0.3",
diff --git a/playground/webpack.config.js b/playground/webpack.config.js
index 71b112c4d2b..de8645388f4 100644
--- a/playground/webpack.config.js
+++ b/playground/webpack.config.js
@@ -10,7 +10,8 @@ const postcssShopify = require('postcss-shopify');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
.BundleAnalyzerPlugin;
-const ICON_PATH_REGEX = /icons\//;
+const INTERNAL_ICON_PATH_REGEX = /icons\//;
+const PACKAGE_ICON_PATH_REGEX = /polaris-icons\//;
const IMAGE_PATH_REGEX = /\.(jpe?g|png|gif|svg)$/;
module.exports = (env = {production: false}) => ({
@@ -117,7 +118,11 @@ module.exports = (env = {production: false}) => ({
},
{
test(resource) {
- return ICON_PATH_REGEX.test(resource) && resource.endsWith('.svg');
+ return (
+ (INTERNAL_ICON_PATH_REGEX.test(resource) ||
+ PACKAGE_ICON_PATH_REGEX.test(resource)) &&
+ resource.endsWith('.svg')
+ );
},
use: [
{
@@ -134,7 +139,11 @@ module.exports = (env = {production: false}) => ({
{
test(resource) {
return (
- IMAGE_PATH_REGEX.test(resource) && !ICON_PATH_REGEX.test(resource)
+ IMAGE_PATH_REGEX.test(resource) &&
+ !(
+ INTERNAL_ICON_PATH_REGEX.test(resource) ||
+ PACKAGE_ICON_PATH_REGEX.test(resource)
+ )
);
},
use: [
diff --git a/src/components/Icon/Icon.tsx b/src/components/Icon/Icon.tsx
index 3ea75bc6e77..c3a02174e2c 100644
--- a/src/components/Icon/Icon.tsx
+++ b/src/components/Icon/Icon.tsx
@@ -30,17 +30,17 @@ import {
circlePlus,
circlePlusOutline,
conversation,
- delete as deleteIcon,
+ deleteIcon,
disable,
dispute,
duplicate,
embed,
- export as exportIcon,
+ exportIcon,
external,
help,
home,
horizontalDots,
- import as importIcon,
+ importIcon,
logOut,
notes,
notification,
diff --git a/src/icons/add.svg b/src/icons/add.svg
deleted file mode 100644
index 4ade19401da..00000000000
--- a/src/icons/add.svg
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/src/icons/alert.svg b/src/icons/alert.svg
deleted file mode 100644
index 995116c5ff4..00000000000
--- a/src/icons/alert.svg
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/src/icons/arrow-down.svg b/src/icons/arrow-down.svg
deleted file mode 100644
index 51213901546..00000000000
--- a/src/icons/arrow-down.svg
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/src/icons/arrow-left.svg b/src/icons/arrow-left.svg
deleted file mode 100644
index 5e3fdbfb8b0..00000000000
--- a/src/icons/arrow-left.svg
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/src/icons/arrow-right.svg b/src/icons/arrow-right.svg
deleted file mode 100644
index a1ac3323a7a..00000000000
--- a/src/icons/arrow-right.svg
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/src/icons/arrow-up-down.svg b/src/icons/arrow-up-down.svg
deleted file mode 100644
index dfff1bfcc7d..00000000000
--- a/src/icons/arrow-up-down.svg
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/src/icons/arrow-up.svg b/src/icons/arrow-up.svg
deleted file mode 100644
index 5816185db24..00000000000
--- a/src/icons/arrow-up.svg
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/src/icons/calendar.svg b/src/icons/calendar.svg
deleted file mode 100644
index 7762fa07a1f..00000000000
--- a/src/icons/calendar.svg
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/src/icons/cancel-small.svg b/src/icons/cancel-small.svg
deleted file mode 100644
index b37477275dc..00000000000
--- a/src/icons/cancel-small.svg
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/src/icons/cancel.svg b/src/icons/cancel.svg
deleted file mode 100644
index 1876ce97091..00000000000
--- a/src/icons/cancel.svg
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/src/icons/caret-down.svg b/src/icons/caret-down.svg
deleted file mode 100644
index 71a305fce97..00000000000
--- a/src/icons/caret-down.svg
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/src/icons/caret-up.svg b/src/icons/caret-up.svg
deleted file mode 100644
index 3f9074875c8..00000000000
--- a/src/icons/caret-up.svg
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/src/icons/checkmark.svg b/src/icons/checkmark.svg
deleted file mode 100644
index 55cc103aa04..00000000000
--- a/src/icons/checkmark.svg
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/src/icons/chevron-down.svg b/src/icons/chevron-down.svg
deleted file mode 100644
index 6fef44870e4..00000000000
--- a/src/icons/chevron-down.svg
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/src/icons/chevron-left.svg b/src/icons/chevron-left.svg
deleted file mode 100644
index 4aba398e236..00000000000
--- a/src/icons/chevron-left.svg
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/src/icons/chevron-right.svg b/src/icons/chevron-right.svg
deleted file mode 100644
index 11fbfd02d32..00000000000
--- a/src/icons/chevron-right.svg
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/src/icons/chevron-up.svg b/src/icons/chevron-up.svg
deleted file mode 100644
index 015381fbd64..00000000000
--- a/src/icons/chevron-up.svg
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/src/icons/circle-cancel.svg b/src/icons/circle-cancel.svg
deleted file mode 100644
index e9ac0d77710..00000000000
--- a/src/icons/circle-cancel.svg
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/src/icons/circle-chevron-down.svg b/src/icons/circle-chevron-down.svg
deleted file mode 100644
index 5075ea2c149..00000000000
--- a/src/icons/circle-chevron-down.svg
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/src/icons/circle-chevron-left.svg b/src/icons/circle-chevron-left.svg
deleted file mode 100644
index add418070f5..00000000000
--- a/src/icons/circle-chevron-left.svg
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/src/icons/circle-chevron-right.svg b/src/icons/circle-chevron-right.svg
deleted file mode 100644
index 83978b5fabc..00000000000
--- a/src/icons/circle-chevron-right.svg
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/src/icons/circle-chevron-up.svg b/src/icons/circle-chevron-up.svg
deleted file mode 100644
index 0361b4fc3db..00000000000
--- a/src/icons/circle-chevron-up.svg
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/src/icons/circle-information.svg b/src/icons/circle-information.svg
deleted file mode 100644
index b981582d3d1..00000000000
--- a/src/icons/circle-information.svg
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/src/icons/circle-plus-outline.svg b/src/icons/circle-plus-outline.svg
deleted file mode 100644
index 647659dd465..00000000000
--- a/src/icons/circle-plus-outline.svg
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/src/icons/circle-plus.svg b/src/icons/circle-plus.svg
deleted file mode 100644
index 471eb59e1a4..00000000000
--- a/src/icons/circle-plus.svg
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/src/icons/conversation.svg b/src/icons/conversation.svg
deleted file mode 100644
index 2a83c03382b..00000000000
--- a/src/icons/conversation.svg
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/src/icons/delete.svg b/src/icons/delete.svg
deleted file mode 100644
index 696009d1cea..00000000000
--- a/src/icons/delete.svg
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/src/icons/disable.svg b/src/icons/disable.svg
deleted file mode 100644
index b476418ecb4..00000000000
--- a/src/icons/disable.svg
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/src/icons/dispute.svg b/src/icons/dispute.svg
deleted file mode 100644
index 08f0c7fa722..00000000000
--- a/src/icons/dispute.svg
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/src/icons/duplicate.svg b/src/icons/duplicate.svg
deleted file mode 100644
index 2ff5104ba3f..00000000000
--- a/src/icons/duplicate.svg
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/src/icons/ellipsis.svg b/src/icons/ellipsis.svg
deleted file mode 100644
index 398240298a5..00000000000
--- a/src/icons/ellipsis.svg
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/src/icons/embed.svg b/src/icons/embed.svg
deleted file mode 100644
index 42c7d689fcb..00000000000
--- a/src/icons/embed.svg
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/src/icons/export.svg b/src/icons/export.svg
deleted file mode 100644
index 60846b10f27..00000000000
--- a/src/icons/export.svg
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/src/icons/external.svg b/src/icons/external.svg
deleted file mode 100644
index cc8df60cf2a..00000000000
--- a/src/icons/external.svg
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/src/icons/help.svg b/src/icons/help.svg
deleted file mode 100644
index 4f45f84f532..00000000000
--- a/src/icons/help.svg
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/src/icons/home.svg b/src/icons/home.svg
deleted file mode 100644
index f1085a24039..00000000000
--- a/src/icons/home.svg
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/src/icons/horizontal-dots.svg b/src/icons/horizontal-dots.svg
deleted file mode 100644
index 398240298a5..00000000000
--- a/src/icons/horizontal-dots.svg
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/src/icons/import.svg b/src/icons/import.svg
deleted file mode 100644
index 409db21640d..00000000000
--- a/src/icons/import.svg
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/src/icons/index.ts b/src/icons/index.ts
index 77a93b6093b..8898a79b378 100644
--- a/src/icons/index.ts
+++ b/src/icons/index.ts
@@ -1,53 +1,55 @@
-export {default as add} from './add.svg';
-export {default as alert} from './alert.svg';
-export {default as arrowDown} from './arrow-down.svg';
-export {default as arrowLeft} from './arrow-left.svg';
-export {default as arrowRight} from './arrow-right.svg';
-export {default as arrowUp} from './arrow-up.svg';
-export {default as arrowUpDown} from './arrow-up-down.svg';
-export {default as calendar} from './calendar.svg';
-export {default as cancel} from './cancel.svg';
-export {default as cancelSmall} from './cancel-small.svg';
-export {default as caretDown} from './caret-down.svg';
-export {default as caretUp} from './caret-up.svg';
-export {default as checkmark} from './checkmark.svg';
-export {default as chevronDown} from './chevron-down.svg';
-export {default as chevronLeft} from './chevron-left.svg';
-export {default as chevronRight} from './chevron-right.svg';
-export {default as chevronUp} from './chevron-up.svg';
-export {default as circleCancel} from './circle-cancel.svg';
-export {default as circleChevronDown} from './circle-chevron-down.svg';
-export {default as circleChevronLeft} from './circle-chevron-left.svg';
-export {default as circleChevronRight} from './circle-chevron-right.svg';
-export {default as circleChevronUp} from './circle-chevron-up.svg';
-export {default as circleInformation} from './circle-information.svg';
-export {default as circlePlus} from './circle-plus.svg';
-export {default as circlePlusOutline} from './circle-plus-outline.svg';
-export {default as conversation} from './conversation.svg';
-export {default as delete} from './delete.svg';
-export {default as disable} from './disable.svg';
-export {default as dispute} from './dispute.svg';
-export {default as duplicate} from './duplicate.svg';
-export {default as embed} from './embed.svg';
-export {default as ellipsis} from './ellipsis.svg';
-export {default as export} from './export.svg';
-export {default as external} from './external.svg';
-export {default as help} from './help.svg';
-export {default as home} from './home.svg';
-export {default as horizontalDots} from './horizontal-dots.svg';
-export {default as import} from './import.svg';
-export {default as logOut} from './log-out.svg';
-export {default as menu} from './menu.svg';
-export {default as notes} from './notes.svg';
-export {default as notification} from './notification.svg';
-export {default as onlineStore} from './online-store.svg';
-export {default as orders} from './orders.svg';
-export {default as print} from './print.svg';
-export {default as products} from './products.svg';
-export {default as profile} from './profile.svg';
-export {default as subtract} from './subtract.svg';
-export {default as refresh} from './refresh.svg';
-export {default as risk} from './risk.svg';
-export {default as save} from './save.svg';
-export {default as search} from './search.svg';
-export {default as view} from './view.svg';
+import POLARIS_ICONS from '@shopify/polaris-icons';
+
+export const add = POLARIS_ICONS.add;
+export const alert = POLARIS_ICONS.alert;
+export const arrowDown = POLARIS_ICONS.arrowDown;
+export const arrowLeft = POLARIS_ICONS.arrowLeft;
+export const arrowRight = POLARIS_ICONS.arrowRight;
+export const arrowUp = POLARIS_ICONS.arrowUp;
+export const arrowUpDown = POLARIS_ICONS.arrowUpDown;
+export const calendar = POLARIS_ICONS.calendar;
+export const cancel = POLARIS_ICONS.cancel;
+export const cancelSmall = POLARIS_ICONS.cancelSmall;
+export const caretDown = POLARIS_ICONS.caretDown;
+export const caretUp = POLARIS_ICONS.caretUp;
+export const checkmark = POLARIS_ICONS.checkmark;
+export const chevronDown = POLARIS_ICONS.chevronDown;
+export const chevronLeft = POLARIS_ICONS.chevronLeft;
+export const chevronRight = POLARIS_ICONS.chevronRight;
+export const chevronUp = POLARIS_ICONS.chevronUp;
+export const circleCancel = POLARIS_ICONS.circleCancel;
+export const circleChevronDown = POLARIS_ICONS.circleChevronDown;
+export const circleChevronLeft = POLARIS_ICONS.circleChevronLeft;
+export const circleChevronRight = POLARIS_ICONS.circleChevronRight;
+export const circleChevronUp = POLARIS_ICONS.circleChevronUp;
+export const circleInformation = POLARIS_ICONS.circleInformation;
+export const circlePlus = POLARIS_ICONS.circlePlus;
+export const circlePlusOutline = POLARIS_ICONS.circlePlusOutline;
+export const conversation = POLARIS_ICONS.conversation;
+export const deleteIcon = POLARIS_ICONS.deleteIcon;
+export const disable = POLARIS_ICONS.disable;
+export const dispute = POLARIS_ICONS.dispute;
+export const duplicate = POLARIS_ICONS.duplicate;
+export const ellipsis = POLARIS_ICONS.ellipsis;
+export const embed = POLARIS_ICONS.embed;
+export const exportIcon = POLARIS_ICONS.exportIcon;
+export const external = POLARIS_ICONS.external;
+export const help = POLARIS_ICONS.help;
+export const home = POLARIS_ICONS.home;
+export const horizontalDots = POLARIS_ICONS.horizontalDots;
+export const importIcon = POLARIS_ICONS.importIcon;
+export const logOut = POLARIS_ICONS.logOut;
+export const menu = POLARIS_ICONS.menu;
+export const notes = POLARIS_ICONS.notes;
+export const notification = POLARIS_ICONS.notification;
+export const onlineStore = POLARIS_ICONS.onlineStore;
+export const orders = POLARIS_ICONS.orders;
+export const print = POLARIS_ICONS.print;
+export const products = POLARIS_ICONS.products;
+export const profile = POLARIS_ICONS.profile;
+export const subtract = POLARIS_ICONS.subtract;
+export const refresh = POLARIS_ICONS.refresh;
+export const risk = POLARIS_ICONS.risk;
+export const save = POLARIS_ICONS.save;
+export const search = POLARIS_ICONS.search;
+export const view = POLARIS_ICONS.view;
diff --git a/src/icons/log-out.svg b/src/icons/log-out.svg
deleted file mode 100644
index b9435b56613..00000000000
--- a/src/icons/log-out.svg
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/src/icons/menu.svg b/src/icons/menu.svg
deleted file mode 100644
index 9c045dc3dc7..00000000000
--- a/src/icons/menu.svg
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/src/icons/notes.svg b/src/icons/notes.svg
deleted file mode 100644
index e0c8c8a7f28..00000000000
--- a/src/icons/notes.svg
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/src/icons/notification.svg b/src/icons/notification.svg
deleted file mode 100644
index a6141776d71..00000000000
--- a/src/icons/notification.svg
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/src/icons/online-store.svg b/src/icons/online-store.svg
deleted file mode 100644
index 562226f17eb..00000000000
--- a/src/icons/online-store.svg
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/src/icons/orders.svg b/src/icons/orders.svg
deleted file mode 100644
index 0ff134b8872..00000000000
--- a/src/icons/orders.svg
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/src/icons/print.svg b/src/icons/print.svg
deleted file mode 100644
index b08b96b393e..00000000000
--- a/src/icons/print.svg
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/src/icons/products.svg b/src/icons/products.svg
deleted file mode 100644
index 5d044d8653d..00000000000
--- a/src/icons/products.svg
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/src/icons/profile.svg b/src/icons/profile.svg
deleted file mode 100644
index 14544cb48e8..00000000000
--- a/src/icons/profile.svg
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/src/icons/refresh.svg b/src/icons/refresh.svg
deleted file mode 100644
index 184b915fb67..00000000000
--- a/src/icons/refresh.svg
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/src/icons/risk.svg b/src/icons/risk.svg
deleted file mode 100644
index acd0a416538..00000000000
--- a/src/icons/risk.svg
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/src/icons/save.svg b/src/icons/save.svg
deleted file mode 100644
index ee4bcd9cb61..00000000000
--- a/src/icons/save.svg
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/src/icons/search.svg b/src/icons/search.svg
deleted file mode 100644
index b94a5193226..00000000000
--- a/src/icons/search.svg
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/src/icons/subtract.svg b/src/icons/subtract.svg
deleted file mode 100644
index 37a27e26e00..00000000000
--- a/src/icons/subtract.svg
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/src/icons/view.svg b/src/icons/view.svg
deleted file mode 100644
index fc00fa25975..00000000000
--- a/src/icons/view.svg
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/yarn.lock b/yarn.lock
index 6f2c992a8c9..8ea46b37c48 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -287,6 +287,11 @@
mime-types "2.1.12"
request "2.78.0"
+"@shopify/polaris-icons@1.0.0-beta.5":
+ version "1.0.0-beta.5"
+ resolved "https://registry.yarnpkg.com/@shopify/polaris-icons/-/polaris-icons-1.0.0-beta.5.tgz#61e691aebd4234ff1daacf1a60936c55a584c0f9"
+ integrity sha512-wpmTryRRITTTmM7axBQnWMbdzxQl9hVcMOKqSDWiPV42OHCYyjCf7zpE2FiK/fuok9YDDHJVoTxf2DganjhvTw==
+
"@shopify/polaris-tokens@^2.0.0":
version "2.0.0"
resolved "https://registry.yarnpkg.com/@shopify/polaris-tokens/-/polaris-tokens-2.0.0.tgz#a7f7245d0520b232ef014f73bced89970151b086"