在vue3 + ElementUI 项目中自定义 Icon

Lee_Yu_Fan2026-03-11 22:17

前言：

在 iconfont阿里巴巴矢量图标库中复制 svg 代码，封装成一个组件。

正文：

javascript 复制代码

<template>
    <svg :style="{ width: sizeCss, height: sizeCss, color: color, display: 'inline-block', verticalAlign: 'middle',marginRight: '4px' }"
        viewBox="0 0 1024 1024" aria-hidden="true" focusable="false">
        <path
            d="M637.155556 455.111111c-20.48 0-34.133333 13.653333-34.133334 34.133333 0 75.093333-61.44 136.533333-136.533333 136.533334H261.688889c-75.093333 0-136.533333-61.44-136.533333-136.533334 0-75.093333 61.44-136.533333 136.533333-136.533333h102.4c20.48 0 34.133333-13.653333 34.133333-34.133333S384.568889 284.444444 364.088889 284.444444H261.688889C145.635556 284.444444 56.888889 373.191111 56.888889 489.244444s88.746667 204.8 204.8 204.8h204.8c116.053333 0 204.8-88.746667 204.8-204.8 0-20.48-13.653333-34.133333-34.133333-34.133333z"
            fill="currentColor"
            p-id="31867"></path>
        <path
            d="M807.822222 284.444444h-204.8C486.968889 284.444444 398.222222 373.191111 398.222222 489.244444c0 20.48 13.653333 34.133333 34.133334 34.133334s34.133333-13.653333 34.133333-34.133334c0-75.093333 61.44-136.533333 136.533333-136.533333h204.8c75.093333 0 136.533333 61.44 136.533334 136.533333 0 75.093333-61.44 136.533333-136.533334 136.533334h-102.4c-20.48 0-34.133333 13.653333-34.133333 34.133333s13.653333 34.133333 34.133333 34.133333h102.4c116.053333 0 204.8-88.746667 204.8-204.8S923.875556 284.444444 807.822222 284.444444z"
            fill="currentColor"
            p-id="31868">
        </path>
    </svg>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  size: { type: [Number, String], default: 20 },
  color: { type: String, default: 'currentColor' },
})

const sizeCss = computed(() => (typeof props.size === 'number' ? `${props.size}px` : props.size))
const color = computed(() => props.color)
</script>

然后在其他组件中使用：