如何在自定义SVG图形中使用指定名称的Material Design Icon图标

问题1：应该使用哪个SVG基础标签实现需求？ #

优先选择<path>标签，具体选型说明如下：

• 排除<text>：mdi-arrow-left-circle是图标标识名称，并非可渲染的文本字符，用text标签无法输出对应图形。
• 不推荐<img>：将图标作为外部图片嵌入的方案，无法和当前自定义SVG的样式（填充色、描边等）联动，也会额外增加资源请求，性能和灵活度都不高。
• 最优选择<path>：所有MDI图标本质都是基于24*24画布的矢量路径，直接使用path标签渲染对应路径，既可以保证和v-icon组件内的图标完全一致，也能完美适配自定义SVG的样式控制需求。

问题2：如何通过mdi-arrow-left-circle名称获取对应图标内容？ #

你可以通过两种方式获取对应图标的路径数据：

方式1：通过@mdi/js包导入（推荐） #

如果你的项目已经安装了@mdi/js依赖，直接导入对应图标即可，导入的变量就是图标对应的path数据：

import { mdiArrowLeftCircle } from '@mdi/js'

方式2：通过Vuetify内置能力获取 #

如果不想额外安装依赖，也可以直接调用Vuetify的内置图标对象读取路径：

const iconPath = this.$vuetify.icons.values.mdiArrowLeftCircle

完整实现示例 #

注意你示例代码中的<rec>是笔误，正确矩形标签为<rect>，完整可运行的代码如下：

<template>
  <!-- 自定义100*100画布 -->
  <svg viewBox="0 0 100 100">
    <rect x="0" y="0" width="100" height="100" stroke="grey" fill="none" />
    <!-- 调整MDI图标坐标和缩放，适配画布居中显示 -->
    <g transform="translate(10 10) scale(3.33)">
      <path :d="mdiArrowLeftCircle" fill="red" />
    </g>
  </svg>
</template>

<script>
import { mdiArrowLeftCircle } from '@mdi/js'

export default {
  data() {
    return {
      mdiArrowLeftCircle
    }
  }
}
</script>

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