svg之全局组件,配合雪碧图解决vue2的svg优化问题

这里是vue2中的svg的完整解决方案的另一篇。

javascript 复制代码
<template>
  <svg :class="svgClass">
    <use :xlink:href="`#${name}`"></use>
  </svg>
</template>

<script>
  export default {
    name: 'icon',
    props: {
      name: {
        type: String,
        required: true,
      },
    },
  }
</script>

这里这个就是全局的svg组件,代码来自于webpack - 懒人神器:svg-sprite-loader实现自己的Icon组件 - 好好写代码吧 - SegmentFault 思否

老师的代码则是写成

这样的形式。其实和上面一个意思

相关推荐
LuHang几秒前
WebSocket服务封装实践:从连接管理到业务功能集成
前端·websocket
九十一1 分钟前
vue2中$set的原理
前端
闲不住的李先森8 分钟前
深入解析 Cursor 规则:为团队打造统一的 AI 编程规范
前端·ai编程·cursor
FlowGram22 分钟前
FlowGram 官网建设
前端
晚枫~27 分钟前
零基础快速上手Playwright自动化测试
javascript·python·测试工具·c#·自动化
~无忧花开~28 分钟前
JavaScript学习笔记(二十八):JavaScript性能优化全攻略
开发语言·前端·javascript·笔记·学习·性能优化·js
BumBle29 分钟前
基于UniApp实现DeepSeek AI对话:流式数据传输与实时交互技术解析
前端·uni-app
九十一30 分钟前
vue3事件总线与emit
前端·vue.js
岁月向前1 小时前
不同的协议和场景防丢包方案
前端
琢磨先生TT1 小时前
一个前端工程师的年度作品:从零开发媲美商业级应用的后台管理系统!
前端·前端框架