Move from local icons to polaris-icons

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))

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",

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: [

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,

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;