自动加载项目中的svg图标,并很简单的使用它

自动加载项目中的svg图标,并很简单的使用它

你的项目中是否有很多的图标呢，现在我们的图标基本都是svg文件,现在使用图标有主流的两种方法。

1. 一种是使用线上的，如阿里的字体图标库，我们可以使用在线链接，引入css，js等文件，并在我们的项目中使用这些图标
2. 第二种则是将图标下载到本地,我们可以使用img标签引用他

现在我们来讲一下第二种

1. 现在一般会通过webpack的配置处理图像文件,如下

     {
        
            test: /\.(png|svg|jpg|jpeg|gif|webp)$/i,
            type: 'asset',
            parser: {
        
              dataUrlCondition: {
        
                maxSize: 25 * 1024, // 25kb
              },
            },
   
     }
   

在上面的配置中，当文件大小小于25kb时,会将图片转成base64引入,大于的时候则会将图片以data-url的形式引入,这样的好处就是小图片使用base64的形式可以减少网络请求,但base64会增加打包的大小,因此大图片不适合使用base64的形式,这种方式虽然可以，但是我们依旧要使用img标签来引入我们的图标

2. 第二种方式,使用svg-sprite-loader和svgo-loader处理svg图标,我们的webpack如下配置，如果是图标则使用svgo-loader和svg-sprite-loader处理,如果不是则依然按上面那种方式处理,svg的字体图标存放在src/icons/svg目录下,

使用svg-sprite-loader作用是合并一组单个的svg图片为一个sprite雪碧图，并把合成好的内容，inject插入到html内，形式是添加svg标签,我们通过xlink:href来实现对某一个图标的引用，使用雪碧图可以减少请求，只需请求一张图片

和我们以前的雪碧图可能不大一样，我们以前的雪碧图是通过ui将所有的图标放在一个图片中，然后你通过background-position来引用不同的图标

xlink:href的值是一个id,可以通过设置loader的options中的symbolId来配置
这里我配置的是symbolId: 'icon-[name]',如果我的文件名是bug.svg,xlink:href的