Merge pull request #72 from AstarNetwork/feat/add-info-icon

feat: added icon-info

packages/Icons/index.ts

@@ -58,6 +58,7 @@ import IconEquip from "./src/IconEquip.vue";
 import IconUnequip from "./src/IconUnequip.vue";
 import IconSideNFT from "./src/IconSideNFT.vue";
 import IconEcosystem from "./src/IconEcosystem.vue";
+import IconInfo from "./src/IconInfo.vue";
 
 export const IconsPlugin: Plugin = {
   install(app: App) {
@@ -119,6 +120,7 @@ export const IconsPlugin: Plugin = {
     app.component("astar-icon-unequip", IconUnequip);
     app.component("astar-icon-side-nft", IconSideNFT);
     app.component("astar-icon-ecosystem", IconEcosystem);
+    app.component("astar-icon-info", IconInfo);
   },
 };
 
@@ -182,4 +184,5 @@ export {
   IconUnequip,
   IconSideNFT,
   IconEcosystem,
+  IconInfo,
 };

packages/Icons/src/IconInfo.vue

@@ -0,0 +1,25 @@
+<template>
+  <GoogleMaterialIcon />
+  <span
+    class="material-symbols-outlined"
+    :style="size && `font-size: ${size}px`"
+  >
+    info
+  </span>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import GoogleMaterialIcon from "./GoogleMaterialIcon.vue";
+
+export default defineComponent({
+  components: { GoogleMaterialIcon },
+  props: {
+    size: {
+      type: String,
+      required: false,
+      default: "",
+    },
+  },
+});
+</script>

src/stories/Icons/IconInfo.stories.js

@@ -0,0 +1,11 @@
+import IconInfo from "packages/Icons/src/IconInfo.vue";
+
+export default {
+  title: "Icons/IconInfo",
+  component: IconInfo,
+};
+
+export const DefaultIcon = () => ({
+  components: { IconInfo },
+  template: "<IconInfo />",
+});