🔨 Make dice svg a component (#37)

huchenlei · Nov 24, 2023 · a73315c · a73315c
1 parent 9cbb4d6
commit a73315c
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 34 deletions.
diff --git a/public/icons/dice.svg b/public/icons/dice.svg
diff --git a/src/components/GenerationResultPicker.vue b/src/components/GenerationResultPicker.vue
@@ -2,6 +2,7 @@
 import { photopeaContext, type PhotopeaBound, boundWidth, boundHeight } from '@/Photopea';
 import { computed, reactive, onMounted, ref, watch } from 'vue';
 import ImagePicker from './ImagePicker.vue';
+import DiceOutlined from './svg/DiceOutlined.vue';
 import { CloseOutlined, CheckOutlined, RedoOutlined } from '@ant-design/icons-vue';
 import { getImageDimensions, resizeImage } from '@/ImageUtil';
 import { type IGeneratedImage } from '@/Automatic1111';
@@ -37,6 +38,7 @@ export default {
         CloseOutlined,
         CheckOutlined,
         RedoOutlined,
+        DiceOutlined,
     },
     emits: ['result-finalized', 'generate-more', 'generate-more-variants'],
     setup(props, { emit }) {
@@ -200,7 +202,7 @@ export default {
     </a-spin>
     <a-row v-if="resultImageItems.length > 0">
         <a-button class="button" @click="generateMoreVariants" :title="$t('gen.generateMoreVariants')">
-            <img src="/icons/dice.svg" alt="dice" style="width: 1em; height: 1em; margin-bottom: 4px;">
+            <DiceOutlined></DiceOutlined>
         </a-button>
         <a-button class="button" @click="generateMoreImages" :title="$t('gen.generateMore')">
             <RedoOutlined></RedoOutlined>

diff --git a/src/components/svg/DiceOutlined.vue b/src/components/svg/DiceOutlined.vue
@@ -0,0 +1,47 @@
+<script lang="ts">
+export default {
+  name: 'DiceOutlined'
+}
+</script>
+
+<template>
+  <svg viewBox="0 0 512 512" class="custom-svg" xmlns="http://www.w3.org/2000/svg">
+    <g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)" fill="#ffffff" stroke="none">
+      <path d="M700 5100 c-350 -74 -618 -348 -684 -699 -14 -74 -16 -278 -16 -1841
+0 -1563 2 -1767 16 -1841 67 -357 346 -636 703 -703 74 -14 278 -16 1841 -16
+1563 0 1767 2 1841 16 357 67 636 346 703 703 14 74 16 278 16 1841 0 1936 3
+1835 -61 2002 -60 154 -194 320 -334 413 -86 56 -202 104 -308 126 -88 18
+-161 19 -1862 18 -1670 0 -1775 -1 -1855 -19z m3646 -311 c213 -38 405 -230
+443 -443 15 -83 15 -3489 0 -3572 -38 -213 -230 -405 -443 -443 -83 -15 -3489
+-15 -3572 0 -210 38 -399 224 -443 437 -8 37 -11 576 -11 1795 0 1932 -4 1804
+67 1940 71 134 215 246 365 283 70 16 3501 20 3594 3z" />
+      <path d="M1200 4202 c-305 -102 -399 -474 -179 -707 168 -178 456 -176 620 3
+201 219 133 557 -137 684 -86 40 -217 49 -304 20z" />
+      <path d="M3686 4209 c-109 -26 -235 -130 -283 -235 -77 -170 -45 -354 86 -485
+102 -102 234 -145 373 -121 283 49 441 359 312 615 -89 179 -291 272 -488 226z" />
+      <path d="M1228 2979 c-61 -14 -150 -64 -197 -111 -95 -94 -135 -196 -129 -329
+3 -72 9 -96 40 -160 132 -276 489 -334 698 -113 223 236 112 626 -204 710 -57
+15 -151 17 -208 3z" />
+      <path d="M3668 2971 c-81 -26 -136 -61 -192 -120 -153 -164 -152 -421 3 -584
+210 -222 566 -164 700 113 34 72 36 80 36 180 0 100 -2 108 -36 180 -46 94
+-111 160 -206 207 -62 31 -83 36 -160 39 -67 3 -101 0 -145 -15z" />
+      <path d="M1221 1744 c-123 -33 -227 -121 -283 -239 -40 -86 -49 -202 -23 -290
+91 -316 472 -419 710 -194 100 95 151 242 128 373 -43 254 -289 416 -532 350z" />
+      <path d="M3683 1745 c-214 -58 -352 -269 -316 -481 45 -261 306 -423 554 -344
+303 98 398 472 179 704 -108 114 -268 161 -417 121z" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.custom-svg {
+  width: 1rem;
+  height: 1rem;
+  margin: 3px;
+}
+
+.custom-svg path {
+  fill: var(--color-text);
+  transition: fill 0.3s ease;
+}
+</style>