el-iocn 使用自定义svg

在使用 Element Plus 的 el-icon 组件时，可以使用自定义的 SVG 图标。具体步骤如下：

1. 安装 `@iconify/iconify` 和 `@iconify/vue` 两个库。

   npm install @iconify/iconify @iconify/vue

2. 在项目中注册自定义的 SVG 图标。可以在 `main.js` 中进行全局注册，也可以在组件中局部注册。

   // main.js
   import { Icon } from '@iconify/vue';
   import locationIcon from '@iconify-icons/mdi/map-marker';

   app.component('icon', Icon);
   Iconify.addIcon('location', locationIcon);

这里我们注册了一个名为 `location` 的 SVG 图标。

3. 在 el-icon 组件中使用自定义的 SVG 图标。可以通过设置 `icon` 属性来指定图标名称，或者直接将 SVG 图标作为子组件的内容。

   <template>
     <div>
       <el-icon icon="location"></el-icon>
       <el-icon>
         <svg-icon :icon="locationIcon" />
       </el-icon>
     </div>
   </template>

   <script>
   import { Icon } from '@iconify/vue';
   import locationIcon from '@iconify-icons/mdi/map-marker';

   export default {
     components: {
       Icon,
     },
     data() {
       return {
         locationIcon,
       };
     },
   };
   </script>

这里我们使用了两种方式来显示自定义的 SVG 图标：一种是通过 `icon` 属性来指定图标名称，另一种是将 SVG 图标作为子组件的内容。需要注意的是，在第二种方式中，我们需要将 SVG 图标的名称作为属性传递给子组件。