如何封装svg矢量图

最新推荐文章于 2023-12-07 17:17:00 发布

油麦菜>

最新推荐文章于 2023-12-07 17:17:00 发布

阅读量140

点赞数

文章标签： vue.js javascript 前端 webpack

本文链接：https://blog.csdn.net/weixin_56180673/article/details/127589497

版权

本文介绍了如何在Vue.js项目中封装SVG矢量图，包括安装依赖、配置webpack、创建SVGIcon组件、引用SVG以及在组件中使用SVG。通过这个过程，可以实现SVG图标的全局复用和颜色自由切换。

摘要由CSDN通过智能技术生成

SVG是一种XML应用，是一种简洁，可移植的表示图形信息
主要概括的为以下几点：

svg指可伸缩的矢量图形
使用xml格式定义图形
图像在放大缩小时图形质量不会损失

SVG与Canvas

好了…回到本章重点，如何去配置然后封装一个全局使用的Svg

1、安装依赖

npm install --save-dev svg-sprite-loader

2、将svg放入目录中

在这里插入图片描述

3. vue-cli 2.x 配置在 webpack.base.conf.js中配置允许svg依赖

module: {
   
    rules: [
      {
   
        test: /\.svg$/,
        loader: 'svg-sprite-loader',
        include: [resolve('src/components/icons/svg')],
        options: {
   
          symbolId: 'icon-[name]'
        }
      },
      {
   
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,