ElementPlus的图标为什么不能使用i标签来展示了？

vue3脚手架，引入的是ElementPlus,使用图标的时候发现了只能使用组件，使用i标签无法展示出来图标，但是浏览器上把组件解析成立i标签，如下

img

img

img

求解决

或者
找到Icon图标选项

img


将选项置于Copy Svg Content

img


复制相应代码,此处复制Memu并插入源代码中

  <el-menu-item index="2">
                        <el-icon><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" data-v-394d1fd8=""><path fill="currentColor" d="M160 448a32 32 0 0 1-32-32V160.064a32 32 0 0 1 32-32h256a32 32 0 0 1 32 32V416a32 32 0 0 1-32 32H160zm448 0a32 32 0 0 1-32-32V160.064a32 32 0 0 1 32-32h255.936a32 32 0 0 1 32 32V416a32 32 0 0 1-32 32H608zM160 896a32 32 0 0 1-32-32V608a32 32 0 0 1 32-32h256a32 32 0 0 1 32 32v256a32 32 0 0 1-32 32H160zm448 0a32 32 0 0 1-32-32V608a32 32 0 0 1 32-32h255.936a32 32 0 0 1 32 32v256a32 32 0 0 1-32 32H608z"></path></svg></el-icon>
                        <span>Navigator Two</span>
                    </el-menu-item>

此时全部正常显示

img

这是组件封装好的，用统一标签去区分组件

不支持了呗。现在都是标签形式了

其实，可以看看EL，它已经包含了这个，你再用就会冲突而已

使用过的图标单独引入并注册


<script>
    import {Location, Setting, Menu ,Document} from '@element-plus/icons'

    export default {
        components: {
            Location, Setting, Menu ,Document
        },
        name: "Aside"
    }
</script>

组件化开发是一个趋势