I am trying to display a image in vuetify thats color can be changed depending upon the theme. Basically from my research it seems using a svg is the way to go. I had read that I can use an svg in a v-icon component and then i can utilize the color prop to change the value. However, the icon does not seem to show up at all but its not drawing an error. From my understanding I just needed to copy the d values from the svg to an array in v-icon. My code is as follows:
SVG:
<?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" width="11.39in" height="9.51in" viewBox="0 0 820.2 684.96"><polygon points="107.36 201.88 107.47 322.03 202.62 441.25 348.53 264.83 348.53 505.55 416.8 505.55 416.8 63.91 203.45 321.86 107.36 201.88" stroke-width="0"/><polygon points="202.91 174.32 83.64 23.1 17.27 23.1 17.27 505.55 83.64 505.55 83.64 132.69 202.91 283.91 419.79 23.1 326.65 23.1 202.91 174.32" fill="#231f20" stroke-width="0"/><path d="M759.24,341.88l-2.24,7.27c-20.8,67.52-54.88,97.64-110.51,97.64-75.87,0-124.89-74.6-124.89-190.06s49.45-190.07,129.05-190.07c55.51,0,91.21,32.85,106.1,97.63l1.89,8.21h59.8l-1.47-12.91C808.55,85.97,760.17,0,651.49,0c-59.81,0-109.75,27.53-144.44,79.62-30.8,46.26-47.76,109.82-47.76,178.97,0,78.06,18.17,143.14,52.54,188.21,33.25,43.59,79.82,66.64,134.67,66.64,45.83,0,84.18-15.52,113.99-46.15,25.91-26.61,44.81-63.9,56.18-110.83l3.53-14.58h-60.95Z" fill="#231f20" stroke-width="0"/><path d="M69.55,575.64h-19.88L0,682.64h19.57l13.82-30.17h52.45l13.99,30.17h19.57l-49.54-106.34-.31-.66ZM79.16,638.31h-39.09l19.54-42.3,19.55,42.3Z" fill="#231f20" stroke-width="0"/><path d="M328.43,608.05c0-20.68-14.62-31.17-43.44-31.17h-46.35v105.76h18.82v-43.83h23.37l32.92,43.38.34.45h21.82l-34.89-45.12c17.94-3.4,27.4-13.56,27.4-29.47ZM257.46,590.75h27.52c16.56,0,24.28,5.5,24.28,17.28-.16,11.37-8.1,16.9-24.28,16.9h-27.52v-34.18Z" fill="#231f20" stroke-width="0"/><polygon points="519.91 623.54 478.28 576.87 458.55 576.87 458.55 682.64 477.37 682.64 477.37 601.07 514.96 643.32 524.68 643.32 562.61 601.05 562.61 682.64 581.43 682.64 581.43 576.87 561.53 576.87 519.91 623.54" fill="#231f20" stroke-width="0"/><path d="M763.27,624.14l-11.76-2.59c-14.57-3.31-21.99-6.74-22.14-16.23,0-10.93,7.77-16.47,23.09-16.47,13.86,0,26.21,2.42,37.76,7.41l1.59.69v-14.81l-.74-.28c-11.17-4.14-22.02-6.9-38.61-6.9-27.14,0-42.08,11.02-42.08,31.04s17.63,26.08,34.16,29.92l11.59,2.59c14.57,3.33,23,7.08,23,16.37,0,10.45-9.29,16.2-26.16,16.2s-30.85-2.77-43.74-8.24l-1.58-.67v15.06l.73.28c13.38,5.08,27.55,7.45,44.59,7.45,27.67,0,44.97-11.63,45.15-30.36,0-21.12-17.99-26.8-34.84-30.47Z" fill="#231f20" stroke-width="0"/></svg>
My implementation into v-icon is as follows:
<v-icon color="blue" :icon="['M759.24,341.88l-2.24,7.27c-20.8,67.52-54.88,97.64-110.51,97.64-75.87,0-124.89-74.6-124.89-190.06s49.45-190.07,129.05-190.07c55.51,0,91.21,32.85,106.1,97.63l1.89,8.21h59.8l-1.47-12.91C808.55,85.97,760.17,0,651.49,0c-59.81,0-109.75,27.53-144.44,79.62-30.8,46.26-47.76,109.82-47.76,178.97,0,78.06,18.17,143.14,52.54,188.21,33.25,43.59,79.82,66.64,134.67,66.64,45.83,0,84.18-15.52,113.99-46.15,25.91-26.61,44.81-63.9,56.18-110.83l3.53-14.58h-60.95Z','M69.55,575.64h-19.88L0,682.64h19.57l13.82-30.17h52.45l13.99,30.17h19.57l-49.54-106.34-.31-.66ZM79.16,638.31h-39.09l19.54-42.3,19.55,42.3Z','M328.43,608.05c0-20.68-14.62-31.17-43.44-31.17h-46.35v105.76h18.82v-43.83h23.37l32.92,43.38.34.45h21.82l-34.89-45.12c17.94-3.4,27.4-13.56,27.4-29.47ZM257.46,590.75h27.52c16.56,0,24.28,5.5,24.28,17.28-.16,11.37-8.1,16.9-24.28,16.9h-27.52v-34.18Z','M763.27,624.14l-11.76-2.59c-14.57-3.31-21.99-6.74-22.14-16.23,0-10.93,7.77-16.47,23.09-16.47,13.86,0,26.21,2.42,37.76,7.41l1.59.69v-14.81l-.74-.28c-11.17-4.14-22.02-6.9-38.61-6.9-27.14,0-42.08,11.02-42.08,31.04s17.63,26.08,34.16,29.92l11.59,2.59c14.57,3.33,23,7.08,23,16.37,0,10.45-9.29,16.2-26.16,16.2s-30.85-2.77-43.74-8.24l-1.58-.67v15.06l.73.28c13.38,5.08,27.55,7.45,44.59,7.45,27.67,0,44.97-11.63,45.15-30.36,0-21.12-17.99-26.8-34.84-30.47Z']"/>
I am not using Nuxt3 for this but rather vanilla vuejs with vuetify 3 added.