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

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

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

老师的代码则是写成

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

相关推荐

  1. vite+vue3项目中svg图标组件封装

    2024-02-19 00:24:02       43 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-02-19 00:24:02       98 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-02-19 00:24:02       106 阅读
  3. 在Django里面运行非项目文件

    2024-02-19 00:24:02       87 阅读
  4. Python语言-面向对象

    2024-02-19 00:24:02       96 阅读

热门阅读

  1. 110 C++ decltype含义,decltype 主要用途

    2024-02-19 00:24:02       41 阅读
  2. python - 文件

    2024-02-19 00:24:02       59 阅读
  3. C++练习

    C++练习

    2024-02-19 00:24:02      48 阅读
  4. 算法训练营day28(补), 贪心算法2

    2024-02-19 00:24:02       54 阅读
  5. Hive使用双重GroupBy解决数据倾斜问题

    2024-02-19 00:24:02       58 阅读
  6. Qt - 不同类之间槽函数和信号的连接

    2024-02-19 00:24:02       46 阅读
  7. 部分系统函数实现

    2024-02-19 00:24:02       44 阅读
  8. GB/28181 2022 上联检测项

    2024-02-19 00:24:02       47 阅读