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 思否

老师的代码则是写成

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

相关推荐
sibylyue2 分钟前
工作流表单和流程设计前端
开发语言·javascript·开源
一个游离的指针13 分钟前
JS中的对象的相关概念
开发语言·javascript·原型模式
霹雳桃15 分钟前
移动端 H5 折叠屏适配实战:为什么 max-width 没用,min(vw, px) 才是正解
前端·前端框架
mONESY20 分钟前
DeepSeek-R1 WebGPU(六):浏览器本地跑推理的完整实现
javascript
Goodbye23 分钟前
useContext 上下文与自定义 Hooks:跨层级数据共享的优雅方案
前端
新时代牛马24 分钟前
Vue.js 响应式原理详解
前端·javascript·vue.js
jaysee-sjc25 分钟前
【JavaWeb】Tlias智能学习辅助系统|后端Web实战(登录认证)
java·开发语言·前端·学习·mybatis
触底反弹28 分钟前
🔥 从 SPA 到 SSR:5 个核心差异搞懂 Next.js 为什么是前端 SEO 的终极方案
前端·react.js·next.js
岁月留痕16829 分钟前
11 实战项目一:搭建“一言”项目骨架
前端