【vue】webpack插件svg-sprite-loader---实现自己的icon组件

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

引言：最近开始写vue的项目，借鉴了一下vue-element-admin源码，针对vue有一个关于icon图标的处理，最近也找了很多关于vue的icon处理的解决方案，大部分都是按照之前小程序的方式直接引入iconfont项目，然后在外面封装调用样式就可以了。

  • 按照平时导入icon的方法的话有一些已知的缺点

  1. 操作繁琐，每次ui需要加一些新的图标的时候，都要重新下载图标库的项目，然后把整体的文件（其中包括css,svg,ttf,woff等）替换掉。

  2. 如果更改名称的话，需要在图标库里改一次，然后进行下载复制拷贝。

  3. iconfont网站库图标内容有限，特殊业务条件需要uimm们自己设计的图(PSD小图标变身SVG Sprites/font-face历险记)

  • 文档中推荐的方式是引入svg

使用svg的优点

  1. 图标易于实时修改

  2. 图标可以带动画

  3. 可以使用标砖的prop和默认值来将图标保持在一个典型的尺寸并随时按需改变他们

  4. 图标是内联的，所以不需要额外的HTTP请求

  5. 可以动态地使得图标可访问

　注：文档中关于svg的介绍

  • 这里准备采用文档中推荐的插件svg-sprite-loader进行介绍

注：　用来根据导入的svg文件自动生成symbol标签并插入html，接下来就可以在模板忠方便地使用svg-sprite技术了

使用svg-sprite的好处

  1. 页面代码清爽

  2. 可使用ID随处重复调用

  3. 每个SVG图标都可以更改大小颜色

注：张鑫旭大神的介绍-SVG Sprite技术介绍

安装插件

npm install svg-sprite-loader --save

webpack配置

在webpack.base.conf.js加入处理svg的loader

  {
        test: /\.svg$/,
        loader: 'svg-sprite-loader',
        include: [resolve('src/icons')],
        options: {
          symbolId: 'icon-[name]'
        }
　}

这个配置默认导入src文件下的icons文件

src/icons/index

// requires and returns all modules that match
const requireAll = requireContext => requireContext.keys().map(requireContext);
// import all svg
const req = require.context('./assets/svg', true, /\.svg$/);
requireAll(req);

然后运行

npm run dev

报错了，此时我们看我们的webpack配置

{
    test: /\.svg$/,
    loader: 'svg-sprite-loader',
    include: path.resolve(__dirname, '../src/assets/icons')
  },
  {
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    loader: 'url-loader',
    options: {
      limit: 10000,
      name: utils.assetsPath('img/[name].[hash:7].[ext]')
    }
  },

下面url-loader中也处理了svg文件，删掉svg处理之后就显示我们需要的svg了，但是之前的url是我们element-ui里生成的，需要加上**symbol**，不去处理src/assets/svgs路径下的svg文件

{
    test: /\.svg$/,
    loader: 'svg-sprite-loader',
    include: path.resolve(__dirname, '../src/assets/icons')
  },
  {
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    loader: 'url-loader',
     exclude: [
        path.resolve(__dirname, '../src/assets/icons'),
    ],
    options: {
      limit: 10000,
      name: utils.assetsPath('img/[name].[hash:7].[ext]')
    }
  },

注：require.context，webpack管理依赖

使用方法

    <svg>
      <use xlink:href="#jisuan" />
    </svg>

import '@/assets/icons/jisuan.svg'

组件化

当然，这并不是最后想要的结果，我们需要将每个svg文件整合起来组件化，这样方便以后的调用

建立一个Icon.vue文件

<template>
    <svg>
        <use :xlink:href="`#${name}`"></use>
    </svg>
</template>
<script>
  export default {
    name: 'icon',
    props: {
      name: {
        type: String,
        required: true,
      },
    },
  }
</script>

  <icon name="jisuan" />
  import '@/assets/icons/jisuan.svg'

自动导入

这里插入每个svg图标都需要import，在我们平时写项目的时候js，vue文件都已经实现了自动导入，这里照葫芦画瓢，让src/assets/svg里的文件自动导入

assets/icon/scan.js

const requireAll = requireContext => requireContext.keys().map(requireContext);
// import all svg
const req = require.context('./assets/svg', true, /\.svg$/);
requireAll(req);

main.js

import './assets/scan.js'

参考文档:

  • https://segmentfault.com/a/1190000015367490

  • https://cisy.me/webpack-svg-sprite/

以上是 【vue】webpack插件svg-sprite-loader---实现自己的icon组件 的全部内容， 来源链接： utcz.com/z/375877.html

回到顶部