关于vue既可以使用本地icon字体图标又可以element plus icon字体图标的方法

最新推荐文章于 2026-06-12 15:29:05 发布

原创最新推荐文章于 2026-06-12 15:29:05 发布 · 502 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#vue.js #javascript #前端 #前端框架 #vue

Vue 专栏收录该内容

9 篇文章

订阅专栏

1、前言

自己在写项目的时候，想着既可以使用本地icon字体图标又可以使用线上UI的字体图标库。由于目前的字体图标库大部分都是用svg来做的，所以用到了这个方法。

2、本地icon

2.1 下载 vite-plugin-svg-icons插件

 pnpm i vite-plugin-svg-icons

2.2 使用vite-plugin-svg-icons插件

//vite.config.ts

import { defineConfig } from 'vite'
import {createSvgIconsPlugin} from "vite-plugin-svg-icons"
import path from "path";

export default defineConfig({
  plugins: [

    createSvgIconsPlugin({
      iconDirs:[path.resolve(process.cwd(),'src/assets/icons')],//svg-icon 文件夹路径
      symbolId:'icon-[dir]-[name]'
    })
  ],  
})

//mian.ts

import "virtual:svg-icons-register";

2.3 封装svg-icon组件

//svg-icon
<template>
    <svg :class="svgClass" aria-hidden="true">
        <use :xlink:href="iconName" :fill="props.color" />
    </svg>
</template>

<script setup lang="ts">
type propsType = {
    iconClass: string;
    className: string;
    color?: string;
}
const props = withDefaults(defineProps<propsType>(), {
    // 图标名称
    iconClass: '',
    // 样式类名
    className: '',
    // 颜色
    color: '',
})

const svgClass = computed(() => {
    if (props.className) {
        return `svg-icon ${props.className}`
    }
    return 'svg-icon'
})

const iconName = computed(() => {
   return `#icon-${props.iconClass}`
})
</script>

<style scoped lang="scss">
.sub-el-icon,
.nav-icon {
    display: inline-block;
    font-size: 15px;
    margin-right: 12px;
    position: relative;
}

.svg-icon {
    width: 1em;
    height: 1em;
    position: relative;
    fill: currentColor;
    vertical-align: -2px;
}
</style>

2.4 使用svg-icon 仅作示例

<svg-icon  :iconClass="prop.iconName" className="icon"></svg-icon>

3、elemen plus

3.1安装及使用方法

详见element plus，点击链接

3.2动态渲染element plus

<component class="commonIconClass" :is="prop.iconName" v-else></component>

4、总结

如何既要又要呢，这里建议可以给icon字体图标一个类型。

代码如下：

<svg-icon v-if="prop.iconType == 'svg'" :iconClass="prop.iconName" className="icon"></svg-icon>
    <component class="commonIconClass" :is="prop.iconName" v-else></component>

以上就是这次的内容，如有其他方法自行去验证。如有大佬觉得有优化的地方，可以给在下一些指点。