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

老师的代码则是写成

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

相关推荐
simon_93493 小时前
受够了压缩和收费?我作为一个码农,手撸了一款无限容量、原图直出的瀑布流相册!
前端
e***87703 小时前
windows配置永久路由
android·前端·后端
u***27613 小时前
TypeScript 与后端开发Node.js
javascript·typescript·node.js
星空的资源小屋3 小时前
跨平台下载神器ArrowDL,一网打尽所有资源
javascript·笔记·django
Dorcas_FE4 小时前
【tips】动态el-form-item中校验的注意点
前端·javascript·vue.js
小小前端要继续努力4 小时前
前端新人怎么更快的融入工作
前端
八月ouc4 小时前
解密JavaScript模块化演进:从IIFE到ES Module,深入理解现代前端工程化基石
javascript·es6·模块化·cmd·commonjs·amd·iife
四岁爱上了她4 小时前
input输入框焦点的获取和隐藏div,一个自定义的下拉选择
前端·javascript·vue.js
fouryears_234174 小时前
现代 Android 后台应用读取剪贴板最佳实践
android·前端·flutter·dart
boolean的主人5 小时前
mac电脑安装nvm
前端