Update: svg loader for Icon components & README

Author: juzser

.storybook/main.js

@@ -19,7 +19,7 @@ module.exports = {
     },
     '@storybook/addon-links',
     '@storybook/addon-essentials',
-    // '@storybook/addon-knobs',
+    '@storybook/addon-knobs',
   ],
   webpackFinal: async (config, { configType }) => {
     config.module.rules.push(

.storybook/manager-head.html

@@ -12,7 +12,7 @@
     width: 14px;
     height: 14px;
     margin-top: 2px;
-    color: rgb(16,128,67);
+    /* color: rgb(16,128,67); */
   }
 
   #storybook-explorer-tree .sidebar-item[data-selected="true"] svg {

src/Demo.vue

@@ -4,16 +4,19 @@
     list-item Yellow
     list-item Red
     list-item Blue
+
+  icon(source="CirclePlusMinor")
 </template>
 
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator';
-import { List, ListItem } from './polaris-vue';
+import { List, ListItem, Icon } from './polaris-vue';
 
 @Component({
   components: {
     List,
     ListItem,
+    Icon,
   },
 })
 export default class Demo extends Vue {}

src/components/Icon/Icon.vue

@@ -30,7 +30,7 @@ import { VisuallyHidden } from '../VisuallyHidden';
 export const getPolarisIcon = async (
   iconName: string,
 ): Promise<VueConstructor<Vue>> => {
-  const icon = await import(`@shopify/polaris-icons/dist/svg/${iconName}.svg`);
+  const icon = await import(`!vue-svg-loader!@shopify/polaris-icons/dist/svg/${iconName}.svg`);
   return icon;
 };
 

src/components/Icon/README.stories.mdx

@@ -1,26 +1,44 @@
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
+import { Meta, Story, Canvas, ArgsTable, Source } from '@storybook/addon-docs';
 
 import { Icon } from '@/polaris-vue';
 
 <Meta
   title="Components / Images &amp; Icons / Icon"
   component={ Icon }
   argTypes={{
-      source: {
-        name: 'source',
-        options: [
-          'placeholder',
-        ],
-        control: { type: 'select' },
-        table: {
-          type: {
-            summary: 'functionComponent | "placeholder" | svg',
-          },
+    accessibilityLabel: {
+      table: {
+        type: { summary: null },
+      },
+    },
+    backdrop: {
+      table: {
+        type: { summary: null },
+      },
+    },
+    source: {
+      name: 'source',
+      defaultValue: 'CirclePlusMinor',
+      options: [
+        'CirclePlusMinor',
+        'placeholder',
+      ],
+      control: {
+        type: 'select',
+        labels: {
+          CirclePlusMinor: 'default',
         },
+      },
+      table: {
+        type: {
+          summary: 'Shopify SVG Icon | "placeholder" | svg',
+        },
+      },
     },
-     color: {
+    color: {
       name: 'color',
       options: [
+        null,
         'base',
         'subdued',
         'critical',
@@ -30,10 +48,15 @@ import { Icon } from '@/polaris-vue';
         'success',
         'primary',
       ],
-      control: { type: 'select' },
+      control: {
+        type: 'select',
+        labels: {
+          null: 'default',
+        },
+      },
       table: {
         type: {
-          summary: 'base | subdued | critical | interactive | warning | highlight | success | primary'
+          summary: null
         },
       },
     },
@@ -57,6 +80,10 @@ Icons are used to visually communicate core parts of the product and available a
 They can act as wayfinding tools to help merchants more easily understand where they are in the product,
 and common interaction patterns that are available.
 
+*Note: To use icons, you must add `vue-svg-loader` package to your project first, by running:* `yarn add -D vue-svg-loader`
+
+You can find icon list from **Shopify Icon Library**: [here](https://polaris-icons.shopify.com/).
+
 <Canvas>
   <Story name="Icon">
     {Template.bind({})}

src/components/VisuallyHidden/README.stories.mdx

@@ -27,11 +27,11 @@ export const Template = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
   components: { VisuallyHidden },
   template: `<div>
-    <VisuallyHidden>
-      <span>Hidden content</span>
-    </VisuallyHidden>
-    <p>Content passed down have been hide, choose "show code" to see more clearly<p/>
-  <div/>`,
+      <VisuallyHidden>
+        <span>Hidden content</span>
+      </VisuallyHidden>
+      <p>Content passed down have been hide, choose "show code" to see more clearly</p>
+    </div>`,
 });
 
 # Visually hidden

vue.config.js

@@ -15,15 +15,5 @@ module.exports = {
     config.resolve.alias
       .set('@', path.resolve(__dirname, 'src'))
       .set('~', path.resolve(__dirname, 'node_modules/'));
-
-    // SVG loader
-    const svgRule = config.module.rule('svg');
-    svgRule.uses.clear();
-    svgRule
-      .use('babel-loader')
-      .loader('babel-loader')
-      .end()
-      .use('vue-svg-loader')
-      .loader('vue-svg-loader');
   },
 };