feat: ✨ add title prop to icons

- adds a container for icons that includes a title prop
maevsi · Oct 15, 2022 · c4b9691 · c4b9691
1 parent adcd632
commit c4b9691
Show file tree

Hide file tree

Showing 58 changed files with 636 additions and 583 deletions.
diff --git a/nuxt/components/icon/IconAddressBook.vue b/nuxt/components/icon/IconAddressBook.vue
@@ -1,26 +1,27 @@
 <template>
-  <svg
+  <IconContainer
     aria-hidden="true"
     focusable="false"
     data-prefix="far"
     data-icon="address-book"
-    :class="classes"
     role="img"
-    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 512 512"
+    :title="t('title')"
   >
     <path
       fill="currentColor"
       d="M272 288h-64C163.8 288 128 323.8 128 368C128 376.8 135.2 384 144 384h192c8.836 0 16-7.164 16-16C352 323.8 316.2 288 272 288zM240 256c35.35 0 64-28.65 64-64s-28.65-64-64-64c-35.34 0-64 28.65-64 64S204.7 256 240 256zM496 320H480v96h16c8.836 0 16-7.164 16-16v-64C512 327.2 504.8 320 496 320zM496 64H480v96h16C504.8 160 512 152.8 512 144v-64C512 71.16 504.8 64 496 64zM496 192H480v96h16C504.8 288 512 280.8 512 272v-64C512 199.2 504.8 192 496 192zM384 0H96C60.65 0 32 28.65 32 64v384c0 35.35 28.65 64 64 64h288c35.35 0 64-28.65 64-64V64C448 28.65 419.3 0 384 0zM400 448c0 8.836-7.164 16-16 16H96c-8.836 0-16-7.164-16-16V64c0-8.838 7.164-16 16-16h288c8.836 0 16 7.162 16 16V448z"
     />
-  </svg>
+  </IconContainer>
 </template>
 
 <script setup lang="ts">
-export interface Props {
-  classes?: string
-}
-withDefaults(defineProps<Props>(), {
-  classes: 'h-5 md:h-6 w-5 md:w-6 shrink-0',
-})
+const { t } = useI18n()
 </script>
+
+<i18n lang="yml">
+de:
+  title: Addressbuch
+en:
+  title: Adress Book
+</i18n>
diff --git a/nuxt/components/icon/IconArchive.vue b/nuxt/components/icon/IconArchive.vue
@@ -1,25 +1,26 @@
 <template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    :class="classes"
+  <IconContainer
     fill="none"
     viewBox="0 0 24 24"
     stroke="currentColor"
+    :title="t('title')"
   >
     <path
       stroke-linecap="round"
       stroke-linejoin="round"
       stroke-width="2"
       d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4"
     />
-  </svg>
+  </IconContainer>
 </template>
 
 <script setup lang="ts">
-export interface Props {
-  classes?: string
-}
-withDefaults(defineProps<Props>(), {
-  classes: 'h-5 md:h-6 w-5 md:w-6 shrink-0',
-})
+const { t } = useI18n()
 </script>
+
+<i18n lang="yml">
+de:
+  title: Archiv
+en:
+  title: Archive
+</i18n>
diff --git a/nuxt/components/icon/IconArrowLeft.vue b/nuxt/components/icon/IconArrowLeft.vue
@@ -1,25 +1,26 @@
 <template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    :class="classes"
+  <IconContainer
     fill="none"
     viewBox="0 0 24 24"
     stroke="currentColor"
     stroke-width="2"
+    :title="t('title')"
   >
     <path
       stroke-linecap="round"
       stroke-linejoin="round"
       d="M10 19l-7-7m0 0l7-7m-7 7h18"
     />
-  </svg>
+  </IconContainer>
 </template>
 
 <script setup lang="ts">
-export interface Props {
-  classes?: string
-}
-withDefaults(defineProps<Props>(), {
-  classes: 'h-5 md:h-6 w-5 md:w-6 shrink-0',
-})
+const { t } = useI18n()
 </script>
+
+<i18n lang="yml">
+de:
+  title: Zurück
+en:
+  title: Back
+</i18n>
diff --git a/nuxt/components/icon/IconArrowRight.vue b/nuxt/components/icon/IconArrowRight.vue
@@ -1,25 +1,26 @@
 <template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    :class="classes"
+  <IconContainer
     fill="none"
     viewBox="0 0 24 24"
     stroke="currentColor"
     stroke-width="2"
+    :title="t('title')"
   >
     <path
       stroke-linecap="round"
       stroke-linejoin="round"
       d="M14 5l7 7m0 0l-7 7m7-7H3"
     />
-  </svg>
+  </IconContainer>
 </template>
 
 <script setup lang="ts">
-export interface Props {
-  classes?: string
-}
-withDefaults(defineProps<Props>(), {
-  classes: 'h-5 md:h-6 w-5 md:w-6 shrink-0',
-})
+const { t } = useI18n()
 </script>
+
+<i18n lang="yml">
+de:
+  title: Vor
+en:
+  title: Forward
+</i18n>
diff --git a/nuxt/components/icon/IconArrowRotateLeft.vue b/nuxt/components/icon/IconArrowRotateLeft.vue
@@ -1,26 +1,27 @@
 <template>
-  <svg
+  <IconContainer
     aria-hidden="true"
     focusable="false"
     data-prefix="fas"
     data-icon="arrow-rotate-left"
-    :class="classes"
     role="img"
-    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 512 512"
+    :title="t('title')"
   >
     <path
       fill="currentColor"
       d="M480 256c0 123.4-100.5 223.9-223.9 223.9c-48.86 0-95.19-15.58-134.2-44.86c-14.14-10.59-17-30.66-6.391-44.81c10.61-14.09 30.69-16.97 44.8-6.375c27.84 20.91 61 31.94 95.89 31.94C344.3 415.8 416 344.1 416 256s-71.67-159.8-159.8-159.8C205.9 96.22 158.6 120.3 128.6 160H192c17.67 0 32 14.31 32 32S209.7 224 192 224H48c-17.67 0-32-14.31-32-32V48c0-17.69 14.33-32 32-32s32 14.31 32 32v70.23C122.1 64.58 186.1 32.11 256.1 32.11C379.5 32.11 480 132.6 480 256z"
     />
-  </svg>
+  </IconContainer>
 </template>
 
 <script setup lang="ts">
-export interface Props {
-  classes?: string
-}
-withDefaults(defineProps<Props>(), {
-  classes: 'h-5 md:h-6 w-5 md:w-6 shrink-0',
-})
+const { t } = useI18n()
 </script>
+
+<i18n lang="yml">
+de:
+  title: Links drehen
+en:
+  title: Rotate left
+</i18n>
diff --git a/nuxt/components/icon/IconArrowRotateRight.vue b/nuxt/components/icon/IconArrowRotateRight.vue
@@ -1,26 +1,27 @@
 <template>
-  <svg
+  <IconContainer
     aria-hidden="true"
     focusable="false"
     data-prefix="fas"
     data-icon="arrow-rotate-right"
-    :class="classes"
     role="img"
-    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 512 512"
+    :title="t('title')"
   >
     <path
       fill="currentColor"
       d="M496 48V192c0 17.69-14.31 32-32 32H320c-17.69 0-32-14.31-32-32s14.31-32 32-32h63.39c-29.97-39.7-77.25-63.78-127.6-63.78C167.7 96.22 96 167.9 96 256s71.69 159.8 159.8 159.8c34.88 0 68.03-11.03 95.88-31.94c14.22-10.53 34.22-7.75 44.81 6.375c10.59 14.16 7.75 34.22-6.375 44.81c-39.03 29.28-85.36 44.86-134.2 44.86C132.5 479.9 32 379.4 32 256s100.5-223.9 223.9-223.9c69.15 0 134 32.47 176.1 86.12V48c0-17.69 14.31-32 32-32S496 30.31 496 48z"
     />
-  </svg>
+  </IconContainer>
 </template>
 
 <script setup lang="ts">
-export interface Props {
-  classes?: string
-}
-withDefaults(defineProps<Props>(), {
-  classes: 'h-5 md:h-6 w-5 md:w-6 shrink-0',
-})
+const { t } = useI18n()
 </script>
+
+<i18n lang="yml">
+de:
+  title: Rechts drehen
+en:
+  title: Rotate right
+</i18n>
diff --git a/nuxt/components/icon/IconBold.vue b/nuxt/components/icon/IconBold.vue
@@ -1,26 +1,27 @@
 <template>
-  <svg
+  <IconContainer
     aria-hidden="true"
     focusable="false"
     data-prefix="fas"
     data-icon="bold"
-    :class="classes"
     role="img"
-    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 384 512"
+    :title="t('title')"
   >
     <path
       fill="currentColor"
       d="M321.1 242.4C340.1 220.1 352 191.6 352 160c0-70.59-57.42-128-128-128L32 32.01c-17.67 0-32 14.31-32 32s14.33 32 32 32h16v320H32c-17.67 0-32 14.31-32 32s14.33 32 32 32h224c70.58 0 128-57.41 128-128C384 305.3 358.6 264.8 321.1 242.4zM112 96.01H224c35.3 0 64 28.72 64 64s-28.7 64-64 64H112V96.01zM256 416H112v-128H256c35.3 0 64 28.71 64 63.1S291.3 416 256 416z"
     />
-  </svg>
+  </IconContainer>
 </template>
 
 <script setup lang="ts">
-export interface Props {
-  classes?: string
-}
-withDefaults(defineProps<Props>(), {
-  classes: 'h-5 md:h-6 w-5 md:w-6 shrink-0',
-})
+const { t } = useI18n()
 </script>
+
+<i18n lang="yml">
+de:
+  title: Fett
+en:
+  title: Bold
+</i18n>
diff --git a/nuxt/components/icon/IconBug.vue b/nuxt/components/icon/IconBug.vue
@@ -1,26 +1,27 @@
 <template>
-  <svg
+  <IconContainer
     aria-hidden="true"
     focusable="false"
     data-prefix="fas"
     data-icon="bug"
-    :class="classes"
     role="img"
-    xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 512 512"
+    :title="t('title')"
   >
     <path
       fill="currentColor"
       d="M480 256h-64V205.3l54.63-54.63c12.5-12.5 12.5-32.75 0-45.25s-32.75-12.5-45.25 0L370.8 160h-229.5L86.63 105.4c-12.5-12.5-32.75-12.5-45.25 0s-12.5 32.75 0 45.25L96 205.3V256H32C14.31 256 0 270.3 0 288s14.31 32 32 32h64v32c0 15.11 3.088 29.4 7.895 42.86l-62.52 62.52c-12.5 12.5-12.5 32.75 0 45.25C47.63 508.9 55.81 512 64 512s16.38-3.125 22.62-9.375l54.13-54.13C163.2 467.9 192 480 224 480h16.1V239.9C240.1 231.2 247.2 224 256 224S272 231.2 272 239.9V480H288c31.96 0 60.82-12.13 83.25-31.5l54.13 54.13C431.6 508.9 439.8 512 448 512s16.38-3.125 22.62-9.375c12.5-12.5 12.5-32.75 0-45.25l-62.52-62.52C412.9 381.4 416 367.1 416 352v-32h64c17.69 0 32-14.33 32-32S497.7 256 480 256zM352 96c0-53.02-42.98-96-96-96S160 42.98 160 96v32h192V96z"
     />
-  </svg>
+  </IconContainer>
 </template>
 
 <script setup lang="ts">
-export interface Props {
-  classes?: string
-}
-withDefaults(defineProps<Props>(), {
-  classes: 'h-5 md:h-6 w-5 md:w-6 shrink-0',
-})
+const { t } = useI18n()
 </script>
+
+<i18n lang="yml">
+de:
+  title: Bug
+en:
+  title: Bug
+</i18n>
diff --git a/nuxt/components/icon/IconCalendar.vue b/nuxt/components/icon/IconCalendar.vue
@@ -1,25 +1,26 @@
 <template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    :class="classes"
+  <IconContainer
     fill="none"
     viewBox="0 0 24 24"
     stroke="currentColor"
+    :title="t('title')"
   >
     <path
       stroke-linecap="round"
       stroke-linejoin="round"
       stroke-width="2"
       d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
     />
-  </svg>
+  </IconContainer>
 </template>
 
 <script setup lang="ts">
-export interface Props {
-  classes?: string
-}
-withDefaults(defineProps<Props>(), {
-  classes: 'h-5 md:h-6 w-5 md:w-6 shrink-0',
-})
+const { t } = useI18n()
 </script>
+
+<i18n lang="yml">
+de:
+  title: Kalender
+en:
+  title: Calendar
+</i18n>
diff --git a/nuxt/components/icon/IconCheckCircle.vue b/nuxt/components/icon/IconCheckCircle.vue
@@ -1,23 +1,20 @@
 <template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    :class="classes"
-    viewBox="0 0 20 20"
-    fill="currentColor"
-  >
+  <IconContainer viewBox="0 0 20 20" fill="currentColor" :title="t('title')">
     <path
       fill-rule="evenodd"
       d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
       clip-rule="evenodd"
     />
-  </svg>
+  </IconContainer>
 </template>
 
 <script setup lang="ts">
-export interface Props {
-  classes?: string
-}
-withDefaults(defineProps<Props>(), {
-  classes: 'h-5 md:h-6 w-5 md:w-6 shrink-0',
-})
+const { t } = useI18n()
 </script>
+
+<i18n lang="yml">
+de:
+  title: Akzeptieren
+en:
+  title: Accept
+</i18n>