vue3 vite2 封装 SVG 图标组件 - 基于 vite 创建 vue3 全家桶项目续篇

本文详细介绍了如何在Vue3和Vite2环境下封装SVG图标组件,支持在线和本地SVG图标。首先在src/components/svg-icon创建组件,设定输入属性icon和className。接着实现在线SVG图标功能,通过div元素结合mask属性展示图标。然后配置vite-plugin-svg-icons处理本地SVG资源,修改main.ts并完成svg-icon组件。最后,通过测试证明在线图标和本地图标都能正常显示。

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

《基于 vite 创建 vue3 全家桶》一文整合了 Element Plus,并将 Element Plus 中提供的图标进行全局注册,这样可以很方便的延续 Element UI 的风格 —— 通过 el-icon-xxx 的方式使用图标(如果有问题的朋友可以先阅读前面的文章:基于 Vite 创建 vue3 全家桶项目)。

在真实的企业级开发中,Element Plus 内置的图标通常很难满足业务需求,项目中需要引入大量的 SVG 图标资源,本文描述如何在 Vue3 + Vite2 环境中使用 SVG 图标,封装一个支持本地 SVG 图标和在线 SVG 图标的组件 svg-icon

文中实现的 svg-icon 组件会内置到 yyg-cli 脚手架中(通过 yyg 命令行创建的项目内置该组件),如果在此之前已经通过 yyg-cli 创建了项目,可以按照本文的步骤封装 SVG 图标组件 svg-icon

1 创建组件

src/components/ 目录下创建目录 svg-icon,该在目录中创建 svg-icon 组件 index.vue

1.1 输入属性

该组件需要两个输入属性(props):

  • icon:SVG 图标的名称或在线 URL
  • className:动态传递给该组件的样式类名

代码如下:

const props = defineProps({
   
  // SVG 图标名称或在线URL
  icon: {
   
    type: String,
    required: true
  },
  // 图标类名
  className: {
   
    type: String,
    default: ''
  }
})

1.2 SVG 图标样式

style 中定义 svg-icon 的样式类:

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

2 在线 SVG 图标

svg-icon 组件需要支持在线 SVG 图标本地 SVG 图标。首先实现在线 SVG 图标的显示。如下 URL 为一个在线 SVG 图标,可在浏览器中直接访问:

http://www.yygnb.com/demo/car.svg

2.1 判断在线图标

script 中通过计算属性判断 props 中的 icon 是否是在线图标:

const isOnlineSvg = computed(() => /^(https?:)/.test(props.icon))

该判断比较简单,如果 icon 属性以 http:https: 开头,则该图标为在线图标,其他情况均为本地的 SVG 图标。各位朋友可以根据自己项目情况添加或完善该判断逻辑。

2.2 模板和样式

在线 SVG 图标通过 HTML 元素 div 来显示,css3 有个 mask 属性,该属性表示遮罩,可以部分或者完全隐藏一个元素的可见区域,使用方式与 background 很类似。

template 如下:

<div v-if="isOnlineSvg"
     :style="{ 
Vue3封装vite-plugin-svg-icons插件并封装SvgIcon组件的步骤如下: 1. 首先安装vite-plugin-svg-icons插件和fast-glob依赖包,可以使用以下命令进行安装: ``` npm i vite-plugin-svg-icons npm i fast-glob ``` 2.项目的配置文件中进行插件的配置。具体配置方式可以参考vite-plugin-svg-icons的官方文档。 3.SVG图标文件放置在对应的路径下,并与iconDirs设置保持一致。 4.Vue组件中使用SvgIcon组件,并传递相应的props。例如,在index.vue文件中可以这样使用SvgIcon组件: ```html <template> <svg-icon :name="nameVal" color="blue" class-name="menu-svg-icon" :icon-title="iconTitle"></svg-icon> </template> <script setup> import { ref } from &#39;vue&#39;; import SvgIcon from "@/components/SvgIcon.vue"; let iconTitle = ref(&#39;svg图片&#39;); let nameVal = ref(&#39;layer&#39;); </script> <style scoped> .menu-svg-icon { width: 180px; height: 180px; color: red !important; } </style> ``` 5. 最后,在需要全局引入SvgIcon组件的地方进行引入和使用。 请注意,这只是一个大致的步骤,具体的实现可能会根据项目的需求和配置方式有所差异。你可以根据自己的实际情况进行相应的调整和配置。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [vue2+vite中,通过插件vite-plugin-svg-icons和fast-glob封装组件使用svg图片](https://blog.csdn.net/weixin_44867717/article/details/126603027)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] - *2* [【vue3】使用vite-plugin-svg-icons插件显示本地svg图标](https://blog.csdn.net/qq_36977923/article/details/127302147)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程序员优雅哥

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值