Vue3.0 + Ts 项目框架搭建四：配置 Svg-Icon、Icon图标

对，我

已于 2022-04-20 12:28:51 修改

阅读量1.1k

点赞数

分类专栏： Vue3.0 + ts 从零开始搭框架文章标签： vue typescript elementui

于 2022-04-17 15:11:01 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_44209082/article/details/124229690

版权

本文档详细介绍了如何在Vue3.0+Typescript项目中配置SVG图标，包括创建SvgIcon组件，设置utils/validate.ts，管理外部和内部SVG资源，通过svg-sprite-loader处理SVG图标，并在main.ts和vue.config.js中进行相应配置，最终实现SVG图标的成功展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 在src文件下，创建components/SvgIcon/index.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 {
    isExternal as external } from "@/utils/validate";
import {
    defineProps, computed } from "vue";

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

最低0.47元/天解锁文章