zoukankan      html  css  js  c++  java
  • SVG的引入历程


    直接引入编辑器会报错


    Google: typescript svg cannot find module找到 这个网址


    Snipaste_2020-07-29_19-08-30.png


    我放到了 shims-vue.d.ts 里面

    declare module "*.svg" {
      const content: any;
      export default content;
    }
    

    用的时候需要用到svg use 的使用方法所以需要一个loader 所以会用到svg sprite loader
    google搜索svg sprite loader 这个网址

    • 打开控制台:安装yarn add svg-sprite-loader -D
    • 做些配置:你得把搜索到的webpack.config.js的内容改成vue.config.js认识的内容。

    vue.config.js

    const path = import('path')
    
    module.exports = {
      lintOnSave: false,
      chainWebpack: config => {
        const dir = path.resolve(__dirname, 'src/assets/icons')  //我们的icons全处于这个目录
    
        //config就是vue把webpack的API封装了,然后暴露给我们的一个对象
        
        config.module  
          .rule('svg-sprite')  //添加一个规则
          .test(/.svg$/  //文件如果匹配上了这个正则表达式(整个目录下的.svg结尾的文件)就用这个规则
              .include.add(dir).end() // 只包含 icons 目录就结束,其他目录一概不走这个规则(也就是icons目录的.svg文件)
              .use('svg-sprite-loader').loader('svg-sprite-loader').options({extract: false}).end(),  //使用哪些loader
                  //有个坑!打开一个svg文件,其实是个xml文件,用soft wrap自动换行看得更清楚。在<path>标签里添加fill=某种color,那这个icon svg 就会变色!相当于这个svg默认就带颜色了,会覆盖我们自己给他的颜色!那我们不想要我们的svg自带颜色(因为我们改不了),我们也不可能一个个svg都去删掉他们的fill,万一有一百个svg呢!
              .use('svgo-loader').loader('svgo-loader')  //可以使用一个svgo-loader,记得安装(yarn add --dev svgo-loader)!
              .tap(options => ({...options, plugins: [{removeAttrs: {attrs: 'fill'}}]})).end() //添加了一个选项,删除fill属性
            
            //配置插件
        config.plugin('svg-sprite').use(import('svg-sprite-loader/plugin'), [{plainSprite: true}]),
          //其他的svg loader要排除我们现在这个目录,不然dir又走了上面这个又走了其他的
        config.module.rule('svg').exclude.add(dir) , // 其他 svg loader 排除 icons 目录
    

    svg sprite loader的作用:他把我们导入的svg文件们变成symbol标签们(会有个id),把symbol标签外面包一个svg标签,把svg标签放入body里。接下来我们就可以用svg标签包着use标签(用xlink:href指向那个id)就可以使用那个svg了。

    作者:过程是风景
    著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
  • 相关阅读:
    洛谷P4548 [CTSC2006]歌唱王国(概率生成函数)
    洛谷P3643 [APIO2016]划艇(组合数学)
    洛谷T46780 ZJL 的妹子序列(生成函数)
    洛谷P4220 [WC2018]通道(边分治+虚树)
    洛谷P4931 情侣?给我烧了!(加强版)(组合数学)
    洛谷P4451 [国家集训队]整数的lqp拆分(生成函数)
    thinkphp5.0 页面缓存
    thinkphp5.0 cache数据缓存机制
    laravel 视图调用方法并传递参数
    laravel 安装配置前准备
  • 原文地址:https://www.cnblogs.com/justcho/p/13472983.html
Copyright © 2011-2022 走看看