feat: add SVG icons for edit/delete in QuoteCard

client/src/assets/icons/edit.svg

@@ -0,0 +1,200 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+<svg
+    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:cc="http://creativecommons.org/ns#"
+    xmlns:dc="http://purl.org/dc/elements/1.1/"
+    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+    xmlns:svg="http://www.w3.org/2000/svg"
+    xmlns:ns1="http://sozi.baierouge.fr"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    id="svg6254"
+    sodipodi:docname="新規ドキュメント 9"
+    viewBox="0 0 128 128"
+    version="1.1"
+    inkscape:version="0.48.2 r9819"
+  >
+  <title
+      id="title7073"
+    >Pencil Pictogram</title
+  >
+  <sodipodi:namedview
+      id="base"
+      bordercolor="#666666"
+      inkscape:pageshadow="2"
+      inkscape:window-y="-4"
+      fit-margin-left="0"
+      pagecolor="#ffffff"
+      fit-margin-top="0"
+      inkscape:window-maximized="1"
+      inkscape:zoom="4.0745363"
+      inkscape:window-x="-4"
+      inkscape:window-height="1017"
+      showgrid="false"
+      borderopacity="1.0"
+      inkscape:current-layer="layer1"
+      inkscape:cx="45.584279"
+      inkscape:cy="49.522511"
+      fit-margin-right="0"
+      fit-margin-bottom="0"
+      inkscape:window-width="1920"
+      inkscape:pageopacity="0.0"
+      inkscape:document-units="px"
+  />
+  <g
+      id="layer1"
+      inkscape:label="レイヤー 1"
+      inkscape:groupmode="layer"
+      transform="translate(-222.76 -630.44)"
+    >
+    <g
+        id="g7066"
+        transform="matrix(1.7183 0 0 1.7068 -160 -536.05)"
+      >
+      <path
+          id="path5336-6"
+          sodipodi:nodetypes="ccccc"
+          style="stroke-linejoin:round;stroke:#000000;stroke-linecap:round;stroke-width:2.6122;fill:none"
+          inkscape:connector-curvature="0"
+          d="m295.94 710.91l-36.816 36.816-35.073 9.3978 9.3949-35.062 37.195-37.195"
+      />
+      <rect
+          id="rect5338-48"
+          style="fill:#000200"
+          transform="matrix(-.26499 -.96425 .70711 -.70711 0 0)"
+          rx="1.8358"
+          ry="1.8187"
+          height="53.027"
+          width="9.58"
+          y="60.3"
+          x="-820.59"
+      />
+      <rect
+          id="rect5338-4-2"
+          ry="1.8187"
+          style="fill:#000200"
+          rx="1.377"
+          transform="rotate(225)"
+          height="53.819"
+          width="16.654"
+          y="-340.44"
+          x="-702.13"
+      />
+      <rect
+          id="rect5338-1-1"
+          style="fill:#000200"
+          transform="matrix(.96593 .25882 .70711 -.70711 0 0)"
+          rx="1.836"
+          ry="1.8187"
+          height="53.819"
+          width="9.6152"
+          y="-734.79"
+          x="778.66"
+      />
+      <path
+          id="path5336-1-6"
+          style="stroke-linejoin:round;stroke:#000000;stroke-linecap:round;stroke-width:2.6122;fill:#000000"
+          inkscape:connector-curvature="0"
+          d="m224.06 757.12 18.038-4.8199-13.219-13.219-4.8199 18.038z"
+      />
+    </g
+    >
+  </g
+  >
+  <metadata
+    >
+    <rdf:RDF
+      >
+      <cc:Work
+        >
+        <dc:format
+          >image/svg+xml</dc:format
+        >
+        <dc:type
+            rdf:resource="http://purl.org/dc/dcmitype/StillImage"
+        />
+        <cc:license
+            rdf:resource="http://creativecommons.org/licenses/publicdomain/"
+        />
+        <dc:publisher
+          >
+          <cc:Agent
+              rdf:about="http://openclipart.org/"
+            >
+            <dc:title
+              >Openclipart</dc:title
+            >
+          </cc:Agent
+          >
+        </dc:publisher
+        >
+        <dc:title
+          >Pencil Pictogram</dc:title
+        >
+        <dc:date
+          >2013-11-16T20:22:22</dc:date
+        >
+        <dc:description
+          >black pencil pictogram.</dc:description
+        >
+        <dc:source
+          >https://openclipart.org/detail/188837/pencil-pictogram-by-libberry-188837</dc:source
+        >
+        <dc:creator
+          >
+          <cc:Agent
+            >
+            <dc:title
+              >libberry</dc:title
+            >
+          </cc:Agent
+          >
+        </dc:creator
+        >
+        <dc:subject
+          >
+          <rdf:Bag
+            >
+            <rdf:li
+              >learning</rdf:li
+            >
+            <rdf:li
+              >pencil</rdf:li
+            >
+            <rdf:li
+              >stationery</rdf:li
+            >
+            <rdf:li
+              >study</rdf:li
+            >
+            <rdf:li
+              >writing</rdf:li
+            >
+          </rdf:Bag
+          >
+        </dc:subject
+        >
+      </cc:Work
+      >
+      <cc:License
+          rdf:about="http://creativecommons.org/licenses/publicdomain/"
+        >
+        <cc:permits
+            rdf:resource="http://creativecommons.org/ns#Reproduction"
+        />
+        <cc:permits
+            rdf:resource="http://creativecommons.org/ns#Distribution"
+        />
+        <cc:permits
+            rdf:resource="http://creativecommons.org/ns#DerivativeWorks"
+        />
+      </cc:License
+      >
+    </rdf:RDF
+    >
+  </metadata
+  >
+</svg
+>

client/src/assets/icons/trash.svg

@@ -0,0 +1 @@
+<svg height="1000" width="875" xmlns="http://www.w3.org/2000/svg"><path d="M0 281.296l0 -68.355q1.953 -37.107 29.295 -62.496t64.449 -25.389l93.744 0l0 -31.248q0 -39.06 27.342 -66.402t66.402 -27.342l312.48 0q39.06 0 66.402 27.342t27.342 66.402l0 31.248l93.744 0q37.107 0 64.449 25.389t29.295 62.496l0 68.355q0 25.389 -18.553 43.943t-43.943 18.553l0 531.216q0 52.731 -36.13 88.862t-88.862 36.13l-499.968 0q-52.731 0 -88.862 -36.13t-36.13 -88.862l0 -531.216q-25.389 0 -43.943 -18.553t-18.553 -43.943zm62.496 0l749.952 0l0 -62.496q0 -13.671 -8.789 -22.46t-22.46 -8.789l-687.456 0q-13.671 0 -22.46 8.789t-8.789 22.46l0 62.496zm62.496 593.712q0 25.389 18.553 43.943t43.943 18.553l499.968 0q25.389 0 43.943 -18.553t18.553 -43.943l0 -531.216l-624.96 0l0 531.216zm62.496 -31.248l0 -406.224q0 -13.671 8.789 -22.46t22.46 -8.789l62.496 0q13.671 0 22.46 8.789t8.789 22.46l0 406.224q0 13.671 -8.789 22.46t-22.46 8.789l-62.496 0q-13.671 0 -22.46 -8.789t-8.789 -22.46zm31.248 0l62.496 0l0 -406.224l-62.496 0l0 406.224zm31.248 -718.704l374.976 0l0 -31.248q0 -13.671 -8.789 -22.46t-22.46 -8.789l-312.48 0q-13.671 0 -22.46 8.789t-8.789 22.46l0 31.248zm124.992 718.704l0 -406.224q0 -13.671 8.789 -22.46t22.46 -8.789l62.496 0q13.671 0 22.46 8.789t8.789 22.46l0 406.224q0 13.671 -8.789 22.46t-22.46 8.789l-62.496 0q-13.671 0 -22.46 -8.789t-8.789 -22.46zm31.248 0l62.496 0l0 -406.224l-62.496 0l0 406.224zm156.24 0l0 -406.224q0 -13.671 8.789 -22.46t22.46 -8.789l62.496 0q13.671 0 22.46 8.789t8.789 22.46l0 406.224q0 13.671 -8.789 22.46t-22.46 8.789l-62.496 0q-13.671 0 -22.46 -8.789t-8.789 -22.46zm31.248 0l62.496 0l0 -406.224l-62.496 0l0 406.224z"/></svg>

client/src/components/AlertBox.vue

@@ -20,6 +20,7 @@
         display: flex;
         width: 100%;
         height: 100%;
+        z-index: 100;
     }
 
     &__box {

client/src/components/Icon.vue

@@ -0,0 +1,16 @@
+<template>
+  <img class="icon" :src="`/assets/icons/${name}.svg`" />
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  name: string,
+}>()
+</script>
+
+<style lang="scss">
+.icon {
+  width: 100%;
+  height: 100%;
+}
+</style>

client/src/components/QuoteCard.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="quote-card__container" :class="{ 'quote-card__container__editable': editable }">
     <div v-if="editable" class="quote-card__action-buttons">
-      <QuoteCardActionButton @click="editQuote">✎</QuoteCardActionButton>
+      <QuoteCardActionButton @click="editQuote" icon="edit" />
-      <QuoteCardActionButton @click="deleteQuote">🗑</QuoteCardActionButton>
+      <QuoteCardActionButton @click="deleteQuote" icon="trash" />
     </div>
     <div class="quote__quote">
       {{ quote.quote }}

client/src/components/QuoteCardActionButton.vue

@@ -1,15 +1,22 @@
 <template>
   <button class="quote-card-action-button__button">
-    <slot />
+    <Icon :name="icon" />
   </button>
 </template>
 
+<script setup lang="ts">
+defineProps<{
+  icon: string,
+}>()
+</script>
+
 <style lang="scss">
 @import '~/assets/css/components';
 
 .quote-card-action-button {
   &__button {
     margin: 0 4px;
+    padding: 12px;
     width: 48px;
     height: 48px;
     border: $quote-button-border;