feat: add icon component

src/components/Icon/Icon.spec.js

@@ -0,0 +1,25 @@
+import { shallowMount } from '@vue/test-utils';
+import Icon from './Icon.vue';
+
+// Initializing wrapper variable
+let wrapper = null;
+
+// Mount the component to make a wrapper before each test
+beforeEach(() => {
+  wrapper = shallowMount(Icon, {
+    propsData: {
+      id: 'icon',
+      type: 'remove',
+    },
+  });
+});
+
+describe('Icon - Unit', () => {
+  it('should mount the component', () => {
+    expect(wrapper.vm).toBeDefined();
+  });
+
+  it('should icon visibility using prop', async () => {
+    expect(wrapper.props().type).toBe('remove');
+  });
+});

src/components/Icon/Icon.stories.js

@@ -0,0 +1,51 @@
+import Icon from './Icon.vue';
+
+export default {
+  title: 'Components/UI Elements/Icon',
+  component: Icon,
+  argTypes: {
+    type: {
+      control: {
+        type: 'select',
+        options: ['remove', 'error', 'filter', 'info'],
+      },
+      defaultValue: 'remove',
+    },
+  },
+
+  parameters: {
+    componentSubtitle: 'Dynamic icon',
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { Icon },
+  template: '<Icon v-bind="$props" @click="handleClick"/>',
+});
+
+Template.bind({});
+
+export const Remove = Template.bind({});
+Remove.args = {
+  id: 'icon-1',
+  type: 'remove',
+};
+
+export const Error = Template.bind({});
+Error.args = {
+  id: 'icon-1',
+  type: 'error',
+};
+
+export const Filter = Template.bind({});
+Filter.args = {
+  id: 'icon-1',
+  type: 'filter',
+};
+
+export const Info = Template.bind({});
+Info.args = {
+  id: 'icon-1',
+  type: 'info',
+};

src/components/Icon/Icon.vue

@@ -0,0 +1,33 @@
+<template>
+  <Component :is="dynamicIcon" @click="click" />
+</template>
+
+<script>
+export default {
+  name: 'Icon',
+  props: {
+    /** Specify a custom id */
+    id: {
+      type: String,
+      required: true,
+    },
+    /** Specify icon name, You can use any icon that you have inside the
+     * components ui, it is not necessary to pass the "icon-",
+     * just what comes after that. */
+    type: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    dynamicIcon() {
+      return () => import(`@img/icon/icon-${this.type}.svg`);
+    },
+  },
+  methods: {
+    click() {
+      this.$emit('click');
+    },
+  },
+};
+</script>

src/components/Icon/README.md

@@ -0,0 +1,10 @@
+**Demo**
+
+```html
+<PageSize v-model="size" @change="handleChange" />
+```
+
+| Prop name | Type     | Required | Default |
+| --------- | -------- | -------- | ------- |
+| id        | `String` | `true`   | ---     |
+| value     | `Number` | `true`   | ---     |

src/index.js

@@ -12,6 +12,7 @@ export { default as Checkbox } from '@components/Checkbox/Checkbox';
 export { default as Chip } from '@components/Chip/Chip';
 export { default as FilterSelectList } from '@components/FilterComponent/FilterSelectList/FilterSelectList';
 export { default as FilterComponent } from '@components/FilterComponent/FilterComponent';
+export { default as Icon } from '@components/Icon/Icon';
 export { default as Input } from '@components/Input/Input';
 export { default as InputMinusPlus } from '@components/InputMinusPlus/InputMinusPlus';
 export { default as List } from '@components/List/List';