vue3 以el-icon方式使用iconfont上的图标

vue3 以el-icon方式使用iconfont上的图标

在iconfont上面找到图标, 选择复制SVG代码, 如果有fill属性,如fill="#d81e06"需去除掉.

<svgt="1761816351283"class="icon"viewBox="0 0 1024 1024"version="1.1"xmlns="http://www.w3.org/2000/svg"p-id="12772"width="200"height="200"><pathd="M298.667 768h554.666V85.333H298.667c-72.534 0-128 55.467-128 128v597.334c0 72.533 55.466 128 128 128h554.666v-85.334H298.667c-25.6 0-42.667-17.066-42.667-42.666S273.067 768 298.667 768zM384 256h256v85.333H384V256z m0 170.667h256V512H384v-85.333z"p-id="12773"></path>
</svg>

项目中新建组件Book.vue

<template><svgt="1761816351283"class="icon"viewBox="0 0 1024 1024"version="1.1"xmlns="http://www.w3.org/2000/svg"p-id="12772"width="200"height="200"><pathd="M298.667 768h554.666V85.333H298.667c-72.534 0-128 55.467-128 128v597.334c0 72.533 55.466 128 128 128h554.666v-85.334H298.667c-25.6 0-42.667-17.066-42.667-42.666S273.067 768 298.667 768zM384 256h256v85.333H384V256z m0 170.667h256V512H384v-85.333z"p-id="12773"></path></svg>
</template>

使用SVG图标

<template><el-icon  style="color: #185eff"><Book /></el-icon>
</template><script setup>
import { ref, onMounted } from 'vue'
import Book from '@/assets/svg/Book.vue'
</script>