Vue 3.0 中封装icon组件使用外部SVG图标

通常在企业级项目开发时,所使用的 icon 图标,一共分为两类:

  1. element-plus 的图标

  2. 自定义的 svg 图标

对于 element-plus 的图标我们可以直接通过 el-icon 来进行显示,但是自定义图标的话却无法正常显示,所以就需要一个自定义的组件,来显示我们自定义的 svg 图标。

对于这个组件的话,它就需要拥有两种能力:

  1. 显示外部 svg 图标

  2. 显示项目内的 svg 图标

下面将向大家介绍如何实现这个组件的开发:

1. 处理外部 svg 图标显示

1.1. 创建组件

html 复制代码
<!-- components/SvgIcon/index.vue -->

<template>
    <div
        v-if="isExternal"
        :class="className"
        :style="styleExternalIcon"
        class="svg-external-icon svg-icon"
    />
    <svg v-else class="svg-icon" :class="className" aria-hidden="true">
        <use :xlink:href="iconName" />
    </svg>
</template>


<script setup>
import { defineProps, computed } from "vue";

const props = defineProps({
    icon: {
        type: String,
        required: true,
    },
    className: {
        type: String,
        default: "",
    }
});


// 判断外部方法
const  isExternalPath=(path)=> {
    return /^(https?:|mailto:|tel:)/.test(path)
}

// 判断是否外部
const isExternal = computed(() => isExternalPath(props.icon));

// 外部图标样式
const styleExternalIcon = computed(() => ({
    mask: `url(${props.icon}) no-repeat 50% 50%`,
    "-webkit-mask": `url(${props.icon}) no-repeat 50% 50%`,
}));

// 项目内部图标
const iconName = computed(() => `#icon-${props.icon}`);


</script>

<style scoped>

.svg-icon {
    width: 1em;
    height: 1em;
    overflow: hidden;
    fill: currentColor;
    vertical-align: -0.15em;
}

.svg-external-icon {
    background-color: currentColor;
    mask-size: cover !important;
    display: inline-block;
}
</style>

1.2. 页面引入定义的组件

javascript 复制代码
import SvgIcon from '@/components/SvgIcon/index.vue'

1.3. 页面中使用组件

html 复制代码
<span class="svg-container">
	<svg-icon icon="https://res.lgdsunday.club/user.svg"></svg-icon>
</span>

2. 处理内部 svg 图标显示

2.1. 导入项目需要使用的图标

2.2. 引入图标并全局注册

如上图所示,添加一个index.js文件,代码如下:

javascript 复制代码
// icons/index.js

import SvgIcon from "@/components/SvgIcon";

// 通过函数实现自定义上下文
const svgRequire = require.context("./svg", false, /\.svg$/);
svgRequire.keys().forEach((svgIcon) => svgRequire(svgIcon));

export default (app) => {
    app.component("svg-icon", SvgIcon);
};

2.3. 在 main.js 中引入该文件

javascript 复制代码
// main.js
...
// 导入 svgIcon
import installIcons from '@/icons'
...
installIcons(app)
...

2.4. 在页面中使用组件

html 复制代码
// 用户名   
<svg-icon icon="user" />
// 密码
<svg-icon icon="password" />
// 眼睛
<svg-icon icon="eye" />

注意:由于组件在全局注册了,局部页面中无需额外导入。

3. 使用 svg-sprite-loader 处理 svg 图标

为了让图标正常展示,还要给webpack添加一个loader,而svg-sprite-loader 是 webpack 中专门用来处理 svg 图标的一个 loader 。

3.1. 安装loader

javascript 复制代码
npm i --save-dev svg-sprite-loader@6.0.9

3.2. 配置loader

创建 vue.config.js 文件,新增如下配置:

javascript 复制代码
const path = require("path");
function resolve(dir) {
    return path.join(__dirname, dir);
}

module.exports = {
    chainWebpack(config) {
        // 设置 svg-sprite-loader
        config.module.rule("svg").exclude.add(resolve("src/icons")).end();
        config.module
            .rule("icons")
            .test(/\.svg$/)
            .include.add(resolve("src/icons"))
            .end()
            .use("svg-sprite-loader")
            .loader("svg-sprite-loader")
            .options({
                symbolId: "icon-[name]",
            })
            .end();
    },
};
相关推荐
aiguangyuan2 天前
前端开发性能优化概要
系统架构·vue·react·前端开发
阿群的AI工作室3 天前
快来生成属于自己的emoji小人,【超详细教程】包含视频玩法
svg·动效
aiguangyuan4 天前
前端开发 React 状态优化
系统架构·前端开发
aiguangyuan5 天前
React 项目性能瓶颈分析
系统架构·前端开发
我真的叫奥运5 天前
def id 重复引发的 svg 复用的一些思考
前端·svg
Robbie丨Yang7 天前
近期工作感想:职业规划篇
html·css3·前端开发·工作·职业规划
Java水解7 天前
前端绘图基础——SVG详解
前端·svg
白仑色7 天前
JavaScript 语言基础详解
开发语言·javascript·ecmascript·前端开发
白仑色10 天前
AJAX 入门到精通
前端·javascript·ajax·okhttp·web开发·前端开发
charlee4416 天前
WebGL简易教程——结语
教程·webgl·三维可视化·前端开发·计算机图形学