feat(icon): a few new icons (#94)

* feat(icon): a few new icons

Author: arturmiz

__tests__/icon.test.js

@@ -3,11 +3,17 @@ import { VntIcon } from '@/components';
 import { isInstalled } from './utils';
 import { resolveIcon } from '@/components/icon/Icon.vue';
 
+import VntIconAdd from '@/components/icon/icons/Add.vue';
+import VntIconClose from '@/components/icon/icons/Close.vue';
 import VntIconContact from '@/components/icon/icons/Contact.vue';
+import VntIconDelete from '@/components/icon/icons/Delete.vue';
 import VntIconEdit from '@/components/icon/icons/Edit.vue';
+import VntIconFlag from '@/components/icon/icons/Flag.vue';
 import VntIconGlobalNav from '@/components/icon/icons/GlobalNavigation.vue';
+import VntIconHome from '@/components/icon/icons/Home.vue';
 import VntIconSettings from '@/components/icon/icons/Settings.vue';
 import VntIconSave from '@/components/icon/icons/Save.vue';
+import VntIconTag from '@/components/icon/icons/Tag.vue';
 
 describe('Icon', () => {
   let wrapper;
@@ -42,12 +48,18 @@ describe('Icon', () => {
     });
 
     test('uses correct component', () => {
+      expect(resolveIcon('add').name).toBe(VntIconAdd.name);
+      expect(resolveIcon('close').name).toBe(VntIconClose.name);
       expect(resolveIcon('contact').name).toBe(VntIconContact.name);
+      expect(resolveIcon('delete').name).toBe(VntIconDelete.name);
       expect(resolveIcon('edit').name).toBe(VntIconEdit.name);
+      expect(resolveIcon('flag').name).toBe(VntIconFlag.name);
       expect(resolveIcon('global-navigation').name).toBe(VntIconGlobalNav.name);
       expect(resolveIcon('global-nav').name).toBe(VntIconGlobalNav.name);
+      expect(resolveIcon('home').name).toBe(VntIconHome.name);
       expect(resolveIcon('save').name).toBe(VntIconSave.name);
       expect(resolveIcon('settings').name).toBe(VntIconSettings.name);
+      expect(resolveIcon('tag').name).toBe(VntIconTag.name);
       expect(resolveIcon('some-non-existing-icon')).toBeNull();
     });
 

docs/components/icon.md

@@ -16,8 +16,14 @@ Currently supported glyphs:
 
 `name` | icon
 --- |:---:
+add | <icon-basic name="add" />
+close | <icon-basic name="close" />
 contact | <icon-basic name="contact" />
+delete | <icon-basic name="delete" />
 edit | <icon-basic name="edit" />
+flag | <icon-basic name="flag" />
 global-navigation | <icon-basic name="global-navigation" />
+home | <icon-basic name="home" />
 save | <icon-basic name="save" />
 settings | <icon-basic name="settings" />
+tag | <icon-basic name="tag" />

src/components/icon/Icon.vue

@@ -1,23 +1,41 @@
 <script>
+import VntIconAdd from './icons/Add.vue';
+import VntIconClose from './icons/Close.vue';
 import VntIconContact from './icons/Contact.vue';
+import VntIconDelete from './icons/Delete.vue';
 import VntIconEdit from './icons/Edit.vue';
+import VntIconFlag from './icons/Flag.vue';
 import VntIconGlobalNav from './icons/GlobalNavigation.vue';
+import VntIconHome from './icons/Home.vue';
 import VntIconSave from './icons/Save.vue';
 import VntIconSettings from './icons/Settings.vue';
+import VntIconTag from './icons/Tag.vue';
 
 export function resolveIcon(name) {
   switch (name) {
+  case 'add':
+    return VntIconAdd;
+  case 'close':
+    return VntIconClose;
   case 'contact':
     return VntIconContact;
+  case 'delete':
+    return VntIconDelete;
   case 'edit':
     return VntIconEdit;
+  case 'flag':
+    return VntIconFlag;
   case 'global-nav':
   case 'global-navigation':
     return VntIconGlobalNav;
+  case 'home':
+    return VntIconHome;
   case 'save':
     return VntIconSave;
   case 'settings':
     return VntIconSettings;
+  case 'tag':
+    return VntIconTag;
   default:
     return null;
   }
@@ -29,11 +47,17 @@ export default {
   functional: true,
 
   components: {
+    VntIconAdd,
+    VntIconClose,
     VntIconContact,
+    VntIconDelete,
     VntIconEdit,
+    VntIconFlag,
     VntIconGlobalNav,
+    VntIconHome,
     VntIconSave,
-    VntIconSettings
+    VntIconSettings,
+    VntIconTag
   },
 
   props: {

src/components/icon/icons/Add.vue

@@ -0,0 +1,16 @@
+<template functional>
+  <svg xmlns="http://www.w3.org/2000/svg"
+       width="16"
+       height="16"
+       viewBox="0 0 16 16">
+    <path d="M16-8.5v1H8.5V0h-1V-7.5H0v-1H7.5V-16h1v7.5Z"
+          transform="translate(0 16)" />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'VntIconAdd'
+};
+</script>
+

src/components/icon/icons/Close.vue

@@ -0,0 +1,15 @@
+<template functional>
+  <svg xmlns="http://www.w3.org/2000/svg"
+       width="13"
+       height="13"
+       viewBox="0 0 13 13">
+    <path d="M9.156-7.6,14.9-1.851l-.749.749L8.4-6.844,2.647-1.1,1.9-1.851,7.641-7.6,1.9-13.353l.749-.749L8.4-8.359,14.149-14.1l.749.749Z"
+          transform="translate(-1.898 14.102)" />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'VntIconClose'
+};
+</script>

src/components/icon/icons/Delete.vue

@@ -0,0 +1,15 @@
+<template functional>
+  <svg xmlns="http://www.w3.org/2000/svg"
+       width="13"
+       height="16"
+       viewBox="0 0 13 16">
+    <path d="M14-13H13V-1.5a1.472,1.472,0,0,1-.117.586,1.5,1.5,0,0,1-.32.477,1.5,1.5,0,0,1-.477.32A1.472,1.472,0,0,1,11.5,0h-8a1.472,1.472,0,0,1-.586-.117,1.5,1.5,0,0,1-.477-.32,1.5,1.5,0,0,1-.32-.477A1.472,1.472,0,0,1,2-1.5V-13H1v-1H5v-1a.969.969,0,0,1,.078-.391,1.016,1.016,0,0,1,.215-.316,1.016,1.016,0,0,1,.316-.215A.969.969,0,0,1,6-16H9a.969.969,0,0,1,.391.078,1.016,1.016,0,0,1,.316.215,1.016,1.016,0,0,1,.215.316A.969.969,0,0,1,10-15v1h4ZM6-14H9v-1H6Zm6,1H3V-1.5a.481.481,0,0,0,.148.352A.481.481,0,0,0,3.5-1h8a.481.481,0,0,0,.352-.148A.481.481,0,0,0,12-1.5ZM6-3H5v-8H6ZM8-3H7v-8H8Zm2,0H9v-8h1Z"
+          transform="translate(-1 16)" />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'VntIconDelete'
+};
+</script>

src/components/icon/icons/Flag.vue

@@ -0,0 +1,15 @@
+<template functional>
+  <svg xmlns="http://www.w3.org/2000/svg"
+       width="13"
+       height="16"
+       viewBox="0 0 13 16">
+    <path d="M15-14v8H8V-8H3V0H2V-16H9v2ZM8-9v-6H3v6Zm6-4H9v6h5Z"
+          transform="translate(-2 16)" />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'VntIconFlag'
+};
+</script>

src/components/icon/icons/Home.vue

@@ -0,0 +1,15 @@
+<template functional>
+  <svg xmlns="http://www.w3.org/2000/svg"
+       width="16"
+       height="14.92"
+       viewBox="0 0 16 14.92">
+    <path d="M8.811-18.389l8,8.009-.765.765-.706-.7v6.844H9.9V-8.909H7.722v5.441H2.281v-6.844l-.706.7L.811-10.38ZM14.252-4.557V-11.4L8.811-16.841,3.37-11.4v6.844H6.634V-10h4.353v5.441Z"
+          transform="translate(-0.811 18.389)" />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'VntIconHome'
+};
+</script>

src/components/icon/icons/Tag.vue

@@ -0,0 +1,15 @@
+<template functional>
+  <svg xmlns="http://www.w3.org/2000/svg"
+       width="16"
+       height="13"
+       viewBox="0 0 16 13">
+    <path d="M14.539-10.539a4.93,4.93,0,0,1,1.086,1.621A4.986,4.986,0,0,1,16-7a4.957,4.957,0,0,1-.375,1.914,4.941,4.941,0,0,1-1.086,1.617,4.982,4.982,0,0,1-1.621,1.09A4.941,4.941,0,0,1,11-2a4.994,4.994,0,0,1-1.59-.254A4.861,4.861,0,0,1,8-3L6-1,0-7l7-7h6v2.414a5.23,5.23,0,0,1,.809.449A5.272,5.272,0,0,1,14.539-10.539ZM6-2.414l6-6v-2.461a3.907,3.907,0,0,0-.492-.094A4.09,4.09,0,0,0,11-11h-.5a.481.481,0,0,1-.352-.148A.481.481,0,0,1,10-11.5a.481.481,0,0,1,.148-.352A.481.481,0,0,1,10.5-12H11a4.787,4.787,0,0,1,1,.1V-13H7.414l-6,6ZM11-3a3.851,3.851,0,0,0,1.555-.316,4.081,4.081,0,0,0,1.27-.859,4.081,4.081,0,0,0,.859-1.27A3.851,3.851,0,0,0,15-7a3.9,3.9,0,0,0-.145-1.066,4.055,4.055,0,0,0-.406-.957,3.966,3.966,0,0,0-.633-.812A4.022,4.022,0,0,0,13-10.461V-8L8.719-3.719A3.935,3.935,0,0,0,9.8-3.184,3.951,3.951,0,0,0,11-3Z"
+          transform="translate(0 14)" />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'VntIconTag'
+};
+</script>

stories/components/icon.stories.js

@@ -3,21 +3,46 @@ import { storiesOf } from '@storybook/vue';
 /* eslint no-undef: 0,
           no-unused-vars: 0 */
 storiesOf('Icon', module)
+  .add('add', () => ({
+    render: (h) => (
+      <vnt-icon name="add" />
+    )
+  }))
+  .add('close', () => ({
+    render: (h) => (
+      <vnt-icon name="close" />
+    )
+  }))
   .add('contact', () => ({
     render: (h) => (
       <vnt-icon name="contact" />
     )
   }))
+  .add('delete', () => ({
+    render: (h) => (
+      <vnt-icon name="delete" />
+    )
+  }))
   .add('edit', () => ({
     render: (h) => (
       <vnt-icon name="edit" />
     )
   }))
+  .add('flag', () => ({
+    render: (h) => (
+      <vnt-icon name="flag" />
+    )
+  }))
   .add('global-navigation', () => ({
     render: (h) => (
       <vnt-icon name="global-navigation" />
     )
   }))
+  .add('home', () => ({
+    render: (h) => (
+      <vnt-icon name="home" />
+    )
+  }))
   .add('save', () => ({
     render: (h) => (
       <vnt-icon name="save" />
@@ -27,4 +52,9 @@ storiesOf('Icon', module)
     render: (h) => (
       <vnt-icon name="settings" />
     )
+  }))
+  .add('tag', () => ({
+    render: (h) => (
+      <vnt-icon name="tag" />
+    )
   }));