Dynamically colored/styled svg as a cursor in Vuejs-CodePudding

Is there a way to have an dynamically colored svg as a cursor? I want to have a prop that changes the fill value and then reflect that on the cursor.

I saw this post and followed their example and not getting the same results.

How to change CSS cursor dynamically vuejs

I made a CodeSandbox to test this out, but currently it's not working. What am I doing wrong here?

If anyone has any tips or advice I would really appreciate it!

Cheers

NOTE: I use this to get the URL code from the svg

https://codepen.io/yoksel/details/MWKeKK

App.vue

<template>
  <CustomSVG :style="{ cursor: customCursor }" :fill="fill" />
</template>

<script>
import CustomSVG from "./components/CustomSVG.vue";
import { defineComponent, ref } from "vue";

export default defineComponent({
  name: "MyComponent",
  props: {},
  setup(props) {
    const fill = ref("red");
    const customCursor = `url("data:image/svg xml,")`;
    return { fill, customCursor };
  },
  components: { CustomSVG },
});
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

CodePudding user response：

Try to add pointer at the end of customCursor svg:

const { ref } = Vue
const app = Vue.createApp({
  setup() {
    const fill = ref("rgb(255, 99, 71)");
    const customCursor = `url("data:image/svg xml,")
    , pointer`;
    return { fill, customCursor };
  },
})

app.component('customSvg', {
  template: `
    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><rect opacity="0.8" x="7" y="6" width="11" height="11" rx="1" :fill="fill" /><path d="M14.5 14.5V11.25C14.5 10.9739 14.7239 10.75 15 10.75C15.2761 10.75 15.5 10.9739 15.5 11.25V15C15.5 15.2761 15.2761 15.5 15 15.5H5C4.72386 15.5 4.5 15.2761 4.5 15V5C4.5 4.72386 4.72386 4.5 5 4.5H8.75C9.02614 4.5 9.25 4.72386 9.25 5C9.25 5.27614 9.02614 5.5 8.75 5.5H5.5V14.5H14.5Z" fill="black" /><path d="M10.3536 10.3536C10.1583 10.5488 9.84171 10.5488 9.64645 10.3536C9.45118 10.1583 9.45118 9.84171 9.64645 9.64645L14.6464 4.64645C14.8417 4.45118 15.1583 4.45118 15.3536 4.64645C15.5488 4.84171 15.5488 5.15829 15.3536 5.35355L10.3536 10.3536Z" fill="black" /><path d="M15.5 8.5C15.5 8.77614 15.2761 9 15 9C14.7239 9 14.5 8.77614 14.5 8.5V5C14.5 4.72386 14.7239 4.5 15 4.5C15.2761 4.5 15.5 4.72386 15.5 5V8.5Z" fill="black" /><path d="M11.5 5.5C11.2239 5.5 11 5.27614 11 5C11 4.72386 11.2239 4.5 11.5 4.5H15C15.2761 4.5 15.5 4.72386 15.5 5C15.5 5.27614 15.2761 5.5 15 5.5H11.5Z" fill="black" /></svg>
  `,
  props: {
    fill: { type: String, default: "currentColor" },
  },
  setup(props) {
    return {};
  },
})

app.mount('#demo')

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
  <custom-svg :style="{ cursor: customCursor }" :fill="fill"></custom-svg>
</div>