老师您好,处理外部 svg 图标显示时无法正常显示,对于element-plus图标的问题已按照最新规范 npm install @element-plus/icons-vue 下载处理过,但是外部图标还是无法正常显示通过如下代码处理后
源码:
utils/validate.js
export function isExternal(path) {
return /^(https?:|mailto:|tel:)/.test(path);
}
components/svgIcon/svgIcon.vue
<template>
<!-- 展示外部图标 -->
<div
v-if="isExternal"
:style="styleExternalIcon"
class="svg-external-icon svg-icon"
:class="className"
/>
<!-- 展示内部图标 -->
<svg v-else class="svg-icon" :class="className" aria-hidden="true">
<use :xlink:href="iconName" />
</svg>
</template>
<script setup>
import { computed } from "vue";
import { isExternal as external } from "@/utils/validate";
const props = defineProps({
// icon 图标
icon: {
type: String,
required: true
},
// 图标类名-便于处理样式
className: {
type: String,
default: ""
}
});
/**
* 判断当前图标是否为外部图标
*/
const isExternal = computed(() => external(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 lang="scss" scoped>
.svg-icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
.svg-external-icon {
background-color: currentColor;
mask-size: cover !important;
display: inline-block;
}
</style>
views/login/login.vue
<svgIcon icon="https://res.lgdsunday.club/user.svg"></svgIcon>
import svgIcon from "@/components/svgIcon/svgIcon.vue";
基于Vue3重写Vue-element-admin,打造后台前端综合解决方案
了解课程