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

老师的代码则是写成

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

相关推荐
该用户已不存在2 分钟前
AI编程工具大盘点,哪个最适合你
前端·人工智能·后端
一头小鹿15 分钟前
【React Native+Appwrite】获取数据时的分页机制
前端·react native
冴羽23 分钟前
这是一个很酷的金属球,点击它会产生涟漪……
前端·javascript·three.js
烛阴31 分钟前
为什么 `Promise.then` 总比 `setTimeout(..., 0)` 快?微任务的秘密
前端·javascript·typescript
XiaoSong35 分钟前
基于 React Native/Expo 项目的持续集成(CI)最佳实践配置指南
前端·react native·react.js
white-persist42 分钟前
汇编代码详细解释:汇编语言如何转化为对应的C语言,怎么转化为对应的C代码?
java·c语言·前端·网络·汇编·安全·网络安全
张愚歌1 小时前
轻松打造个性化Leaflet地图标记
前端·javascript
华仔啊1 小时前
CSS实现高级流光按钮动画,这几行代码堪称神来之笔
前端·css
用户3777967210961 小时前
新值依赖旧值?并发更新的“坑”
javascript
歪歪1001 小时前
详细介绍一下“集中同步+分布式入库”方案的具体实现步骤
开发语言·前端·分布式·后端·信息可视化