如何在Vuetify 3的v-icon组件中正确使用自定义SVG图标

问题核心原因 #

你的实现存在三个关键问题：

• 图标数组格式错误：Vuetify 3的v-icon接收自定义图标数组时，每个元素必须是包含对应图形属性的对象（path用d，polygon用points），而非直接传入字符串。
• 遗漏图形元素：原SVG包含多个polygon元素，但你只提取了path的d值，导致图标缺失核心内容。
• 硬编码颜色覆盖主题色：原SVG元素带有fill="#231f20"的硬编码属性，会直接覆盖v-icon的color设置，无法实现主题变色。

修正后的实现步骤 #

1. 整理自定义图标数据 #

将原SVG中所有图形元素（polygon和path）转换成对象数组，移除所有fill和stroke-width属性：

const customIcon = [
  { 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" },
  { 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" },
  { 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" },
  { 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" },
  { 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" },
  { 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" },
  { 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" }
];

2. 在Vue组件中使用v-icon #

将整理好的图标数组传入v-icon，同时设置color和合适的size（原SVG尺寸较大，需缩小显示）：

<template>
  <v-icon 
    color="blue" 
    :icon="customIcon" 
    size="128"
    :view-box="'0 0 820.2 684.96'"
  />
</template>

<script setup>
const customIcon = [
  // 上述图标数据
];
</script>

额外说明 #

• 主题切换时，只需修改v-icon的color属性即可，比如绑定Vuetify主题变量color="primary"。
• 若图标显示位置异常，view-box属性需与原SVG的viewBox值保持一致，确保图形正确缩放。

内容的提问来源于stack exchange，提问作者Qiuzman