feat: update arrowheads to support color and svg

Author: gureckis

assets/arrow.svg

@@ -1,6 +1,69 @@
 <script setup>
-import imgUrl from '../assets/arrowheads.png'
+import { computed } from 'vue'
+import { resolveColor } from '../layoutHelper'
+const props = defineProps({
+  color: {
+    type: String,
+    default: '#000000',
+  },
+  width: {
+    type: String,
+    default: '140px', // Default width in pixels
+  },
+})
+const colorFill = computed(() => resolveColor(props.color))
 </script>
 <template>
-  <img :src="imgUrl" alt="Arrowhead" class="w-30" />
+  <svg
+    id="Layer_1"
+    data-name="Layer 1"
+    xmlns="http://www.w3.org/2000/svg"
+    version="1.1"
+    viewBox="0 0 356 204"
+    :width="width"
+  >
+    <path
+      class="cls-1"
+      d="M179.2,133.5c0-8.9.6-17.7-.1-26.5-2.1-26.8-3.9-53.5-3.3-80.4,0-1.7-.3-3.5,0-5.2.3-1.2,1.3-2.2,2-3.3.9,1.1,2.5,2.1,2.6,3.3.3,4.8.1,9.7.1,14.5,0,10.1-.3,20.2,0,30.4.3,9.1,1,18.1,1.7,27.2.9,12.6,1.9,25.2,2.8,37.8,0,.3.2.6.4,1.2,4-3.9,5.5-8.5,6.5-13.5.2-.9.3-1.8.6-2.6.8-2.4,2.4-3.9,4.9-3.1,2.6.8,2.6,3.2,1.7,5.2-2,5.1-4.1,10.3-6.4,15.2-1.4,3-3,6-4.8,8.8-1.9,3.2-4.6,3.5-7,.6-3.9-4.9-7.5-10-11.4-15-2.8-3.6-6-6.9-8.9-10.4-.9-1.1-1.2-2.6-1.7-3.9,1.7,0,3.9-.7,4.8.1,3.2,3,6,6.3,8.7,9.7,2.4,3.2,4.5,6.7,6.5,9.7h.1Z"
+    />
+    <path
+      class="cls-1"
+      d="M262.3,172c5.5-7,11.5-13.5,16.3-20.9,14.9-22.4,30.1-44.5,47.2-65.2,1.1-1.4,2-2.9,3.2-4.1.9-.8,2.4-.9,3.6-1.4,0,1.4.6,3.2,0,4.2-2.8,4-5.9,7.7-8.9,11.5-6.3,7.9-12.7,15.7-18.8,23.9-5.4,7.3-10.4,14.9-15.5,22.4-7.1,10.5-14.1,21-21.2,31.4-.2.2-.2.6-.4,1.2,5.6-.6,9.6-3.3,13.5-6.6.7-.6,1.4-1.2,2.1-1.7,2.1-1.4,4.3-1.6,5.8.6,1.5,2.2,0,4.1-1.9,5.2-4.8,2.8-9.6,5.5-14.4,8-3,1.5-6.1,2.8-9.2,4-3.5,1.3-5.8,0-5.9-3.8,0-6.3.3-12.5.3-18.8,0-4.6-.5-9.1-.5-13.6,0-1.4.7-2.8,1.1-4.2,1.3,1,3.5,1.9,3.7,3.1.7,4.3.8,8.7.9,13,0,4-.6,8-.9,11.6h0Z"
+    />
+    <path
+      class="cls-1"
+      d="M90.2,180.2c-.3-3.6-.8-7.6-.9-11.6,0-4.3.2-8.7.9-13,.2-1.2,2.4-2.1,3.7-3.1.4,1.4,1.1,2.7,1.1,4.2,0,4.5-.5,9.1-.5,13.6,0,6.3.3,12.5.3,18.8,0,3.7-2.4,5.1-5.9,3.8-3.1-1.2-6.2-2.4-9.2-4-4.9-2.5-9.7-5.2-14.4-8-1.9-1.1-3.4-2.9-1.9-5.2,1.5-2.2,3.7-2,5.8-.6.7.5,1.4,1.1,2.1,1.7,3.8,3.3,7.9,6,13.5,6.6-.3-.7-.3-1-.4-1.2-7.1-10.5-14.1-21-21.2-31.4-5.1-7.5-10.1-15.1-15.5-22.4-6.1-8.2-12.6-15.9-18.8-23.9-3-3.8-6.1-7.5-8.9-11.5-.7-1,0-2.8,0-4.2,1.2.4,2.7.6,3.6,1.4,1.2,1.1,2.1,2.7,3.2,4.1,17.1,20.8,32.3,42.8,47.2,65.2,4.8,7.4,10.8,14,16.3,20.9h0Z"
+    />
+    <path
+      class="cls-1"
+      d="M117.5,116.8c0-2.5-.1-5.3,0-8,.3-3,.6-6,1.3-8.9.2-.8,1.8-1.3,2.7-1.9.2,1,.6,1.9.5,2.9-.3,3.1-.9,6.2-1.1,9.3-.3,4.3-.5,8.6-.8,12.9-.2,2.6-1.9,3.4-4.2,2.3-2.1-1-4.1-2-6.1-3.2-3.2-2-6.4-4.1-9.5-6.3-1.2-.8-2.1-2.2-1-3.6,1.2-1.5,2.6-1.2,4,0,.5.4.9.8,1.4,1.3,2.5,2.5,5.1,4.6,8.9,5.3-.1-.5-.1-.7-.2-.9-4.3-7.6-8.5-15.2-12.8-22.7-3.1-5.4-6.1-10.9-9.4-16.2-3.7-5.9-7.7-11.6-11.6-17.4s-3.8-5.5-5.5-8.4c-.4-.7.1-1.9.2-2.9.8.4,1.8.6,2.4,1.1.8.8,1.3,2,2,3,10.6,15.2,19.7,31.2,28.7,47.3,2.9,5.3,6.6,10.2,10,15.3h0Z"
+    />
+    <path
+      class="cls-1"
+      d="M241.2,105.2c2.3-1.1,4.7-2.4,7.2-3.5,2.8-1.1,5.6-2.1,8.6-2.7.8-.2,1.9,1,2.9,1.6-.8.6-1.5,1.4-2.4,1.7-2.9,1.1-5.9,1.9-8.9,3.1-4,1.6-7.9,3.4-12,4.9-2.4.9-3.9-.2-3.9-2.8,0-2.3,0-4.6.2-6.9.4-3.8.9-7.5,1.5-11.3.2-1.5,1-2.9,2.8-2.5,1.8.4,2.2,1.9,1.8,3.6-.1.6-.4,1.2-.5,1.8-1.2,3.3-1.9,6.6-.8,10.3.4-.3.6-.4.7-.6,4.9-7.2,9.9-14.3,14.8-21.5,3.5-5.2,7.1-10.3,10.5-15.6,3.7-5.9,7.1-12,10.6-18,1.7-2.9,3.3-5.8,5.1-8.6.5-.7,1.8-.7,2.7-1.1,0,.9.3,1.9,0,2.7-.4,1.1-1.2,2.1-1.8,3.1-9,16.1-19.4,31.4-30,46.5-3.5,5-6.2,10.4-9.3,15.7h.1Z"
+    />
+    <path
+      class="cls-1"
+      d="M285.6,100.8c1.5-.7,3.1-1.6,4.8-2.3,1.8-.7,3.7-1.3,5.6-1.8.5-.1,1.3.7,1.9,1.1-.5.4-1,.9-1.6,1.1-1.9.7-3.9,1.3-5.8,2-2.6,1-5.2,2.2-7.8,3.2-1.6.6-2.6-.2-2.6-1.8,0-1.5,0-3,.2-4.5.3-2.5.6-4.9,1-7.4.1-1,.7-1.9,1.9-1.6,1.2.3,1.5,1.2,1.2,2.3,0,.4-.2.8-.4,1.2-.8,2.2-1.2,4.3-.6,6.7.2-.2.4-.3.4-.4,3.2-4.7,6.5-9.4,9.7-14.1,2.3-3.4,4.7-6.7,6.9-10.2,2.4-3.9,4.6-7.9,7-11.8s2.2-3.8,3.4-5.6c.3-.4,1.2-.5,1.8-.7,0,.6.2,1.2,0,1.8-.3.7-.8,1.3-1.2,2-5.9,10.6-12.7,20.6-19.7,30.5-2.3,3.3-4.1,6.8-6.1,10.3h0Z"
+    />
+    <path
+      class="cls-1"
+      d="M213.9,67.7c1.3-1.1,2.6-2.3,4.1-3.4,1.6-1.1,3.3-2.2,5-3.1.5-.2,1.4.4,2.1.6-.4.5-.7,1.1-1.3,1.5-1.7,1.2-3.5,2.2-5.2,3.3-2.3,1.6-4.5,3.4-6.8,5-1.4,1-2.5.5-2.9-1.2-.4-1.5-.7-2.9-.9-4.4-.3-2.5-.6-4.9-.8-7.4-.1-1,.2-2,1.4-2,1.2,0,1.7.8,1.7,2,0,.4,0,.8,0,1.2-.2,2.3-.2,4.5,1.1,6.7.2-.3.3-.4.3-.5,2-5.3,4.1-10.7,6.1-16,1.4-3.8,2.9-7.7,4.2-11.6,1.4-4.4,2.6-8.8,3.9-13.2s1.2-4.2,1.9-6.3c.2-.5,1-.7,1.5-1.1.2.6.5,1.2.4,1.7,0,.8-.4,1.5-.7,2.2-3.2,11.7-7.4,23-11.8,34.4-1.5,3.7-2.3,7.6-3.5,11.5h0Z"
+    />
+    <path
+      class="cls-1"
+      d="M135.3,64.1c.4-1.6.7-3.4,1.3-5.1.6-1.9,1.3-3.7,2.2-5.5.3-.5,1.3-.6,2-.8,0,.6,0,1.3-.1,1.9-.7,1.9-1.5,3.8-2.1,5.8-.9,2.7-1.6,5.4-2.5,8.1-.5,1.6-1.7,1.9-3.1.8-1.2-.9-2.3-1.9-3.4-3-1.7-1.8-3.4-3.6-5.1-5.5-.7-.7-1-1.7,0-2.5,1-.7,1.9-.4,2.6.6.2.3.4.7.7,1,1.2,2,2.6,3.7,4.9,4.7,0-.3,0-.5,0-.6-1.6-5.5-3.1-11-4.7-16.5-1.1-3.9-2.2-7.9-3.5-11.8-1.5-4.4-3.1-8.6-4.7-12.9-.8-2.1-1.6-4.1-2.2-6.2-.2-.5.4-1.2.6-1.8.5.4,1.1.6,1.4,1.1.4.7.5,1.5.8,2.2,4.4,11.3,7.8,22.9,11.1,34.6,1,3.8,2.7,7.5,4.1,11.3h0Z"
+    />
+    <path
+      class="cls-1"
+      d="M63.5,97.6c-.1-1.6-.3-3.5-.3-5.3,0-2,.2-3.9.5-5.9,0-.5,1.1-.9,1.7-1.4.2.6.5,1.2.4,1.9,0,2-.3,4.1-.4,6.2,0,2.8,0,5.7,0,8.5,0,1.7-1.1,2.3-2.7,1.7-1.4-.6-2.8-1.2-4.1-1.9-2.2-1.2-4.3-2.5-6.4-3.8-.8-.5-1.5-1.3-.8-2.3.7-1,1.7-.9,2.6-.2.3.2.6.5.9.8,1.7,1.5,3.5,2.8,6,3.1-.1-.3-.1-.5-.2-.6-3.1-4.8-6.2-9.6-9.3-14.4-2.2-3.4-4.4-6.9-6.8-10.3-2.7-3.7-5.5-7.3-8.3-11-1.3-1.7-2.7-3.5-3.9-5.3-.3-.4,0-1.3,0-1.9.6.2,1.2.3,1.6.7.6.5.9,1.2,1.4,1.9,7.5,9.5,14.1,19.7,20.7,29.9,2.1,3.4,4.8,6.4,7.2,9.6h0Z"
+    />
+  </svg>
 </template>
+
+<style scoped>
+.cls-1 {
+  fill: v-bind(colorFill);
+  stroke-width: 0px;
+}
+</style>

assets/arrowheads.svg

@@ -13,6 +13,7 @@ import QrcodeVue from 'qrcode.vue'
 import SpeechBubble from '../../../components/SpeechBubble.vue'
 
 import ArrowDraw from '../../../components/ArrowDraw.vue'
+import ArrowHeads from '../../../components/ArrowHeads.vue'
 import Line from '../../../components/Line.vue'
 import BackPack from '../../../components/vue3-kawaii/components/backpack/BackPack.vue'
 import Browser from '../../../components/vue3-kawaii/components/browser/Browser.vue'
@@ -40,6 +41,7 @@ export default {
     app.component('QRCode', QrcodeVue)
     app.component('SpeechBubble', SpeechBubble)
     app.component('ArrowDraw', ArrowDraw)
+    app.component('ArrowHeads', ArrowHeads)
     app.component('Line', Line)
     app.component('BackPack', BackPack)
     app.component('Browser', Browser)

components/ArrowHeads.vue

@@ -6,10 +6,23 @@ Draws a set of hand drawn arrows that point to a central location. Useful to cal
 
 ## `ArrowHeads` component
 
+The ArrowHeads component has the following props:
+
+- `color` (optional) the color of the arrow stroke. Colors can be any of the tailwind colors like `red-400` in the theme or a hex code. Default is black.
+- width (optional) the initial width of the image. Default is 140px
+
+```md
+<ArrowHeads color='pink-500' width="300px" v-drag />
+```
+
+Renders as:
+
+<ArrowHeads color='pink-500' width="300px"/>
+
 ```md
-<ArrowHeads v-drag />
+<ArrowHeads  v-drag />
 ```
 
 Renders as:
 
-<img src="/screenshots/arrowheads.png" alt="ArrowHeads component" width="200px" />
+<ArrowHeads />