vue3怎么安装svgicon

要在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库