关于在项目中使用svg的记录与心得

98 阅读1分钟

1.把svg当图片使用

方式:

import x from 'xx/xx.svg'
const xxx=()=>{//react函数组件,你懂的
    return (
    <img src={x}>
    )
  }

改图片颜色不是很方便,要去svg里面手动地把fill改掉

2.使用svg-sprite-loader

    //webpack.config.js rules加个
    {
             test: /\.svg$/,
             use: [
               { loader: 'svg-sprite-loader', options: {} },
               {
                 loader: 'svgo-loader', options: {}
               }
             ]
           },
     //使用
     import x from 'xx/xx.svg'
     
     console.log(x)//注意这一步
     <svg>//可以直接<svg fill="">
         <use xlinkHref="#id">
         //id就是文件名
     </svg>
    

这loader干了什么? 把引入的所有svg合并成一个大的svg标签,里面分别是对应的svg symbols标签

为什么一定要把x console出来呢?(import的时候)

tree Shaking

根据代码分析并没有用到这个x,所以会把它从树上摇下来。

ps:(所以用require吧)