Vue 3 安装 SVG 和 Icon：详细步骤及示例

要在 Vue 3 中使用 SVG 和 Icon，可以按照以下步骤进行安装和配置：

安装 Vue CLI（如果尚未安装）：

npm install -g @vue/cli

创建一个新的 Vue 项目：

vue create my-project

cd my-project

安装vue-svg-loader和@mdi/font（作为 Icon 的示例）：

npm install vue-svg-loader @mdi/font

在项目的根目录下创建一个vue.config.js文件，并添加以下内容：

module.exports = {
  chainWebpack: config => {
    // 配置 svg
    const svgRule = config.module.rule('svg');
    svgRule.uses.clear();
    svgRule
      .use('vue-svg-loader')
      .loader('vue-svg-loader');
  }
};

在src目录下创建一个components文件夹，并在其中创建一个名为MyIcon.vue的文件。在该文件中，可以使用<svg>标签来展示 SVG 图标的内容：

<template>
  <svg>
    <!-- SVG 图标的内容 -->
  </svg>
</template>

<script>
export default {
  name: 'MyIcon'
};
</script>

在需要使用 SVG 图标的组件中，引入MyIcon组件，并使用它：

<template>
  <div>
    <MyIcon />
  </div>
</template>

<script>
import MyIcon from '@/components/MyIcon.vue';

export default {
  components: {
    MyIcon
  }
};
</script>

在需要使用 Icon 的地方，可以使用@mdi/font提供的图标类名来展示 Icon：

<template>
  <div>
    <i class='mdi mdi-heart'></i>
  </div>
</template>

现在，你已经成功安装和配置了 SVG 和 Icon，在 Vue 3 中可以使用它们了。当然，你可以根据需要使用其他的 SVG 库和 Icon 库。