feat(icon): Adding the AttributeIcon component

Author: luksak

components/AttributeIcon.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="icon" :class="classObject">
+    <SpriteSymbol :name="name" />
+  </div>
+</template>
+
+<script setup lang="ts">
+export interface Props {
+  name: string;
+  fill?: boolean;
+  modifier?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  fill: false,
+});
+
+const classObject = reactive({
+  [`icon--${props.name}`]: true,
+  "icon--fill": props.fill,
+});
+
+if (props.modifier) {
+  classObject[`icon--${props.modifier}`] = true;
+}
+</script>
+
+<style lang="scss">
+@use "~/assets/sass/tools";
+
+.icon {
+  width: var(--icon-size--s);
+  height: var(--icon-size--s);
+  display: inline-flex;
+  align-items: center;
+
+  svg {
+    display: block;
+    width: 100%;
+    height: 100%;
+    margin-bottom: 0;
+  }
+
+  &--logo {
+    svg {
+      width: var(--icon-size--logo);
+      height: auto;
+    }
+  }
+
+  &--fill {
+    svg {
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+</style>

nuxt.config.ts

@@ -1,4 +1,5 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   devtools: { enabled: true },
-})
+  modules: ["nuxt-svg-icon-sprite"],
+})

package.json

@@ -15,6 +15,7 @@
     "@nuxt/eslint": "latest",
     "eslint": "^9.34.0",
     "nuxt": "^4.0.3",
+    "nuxt-svg-icon-sprite": "2.0.2",
     "typescript": "^5.9.2",
     "vue": "latest"
   }