最新公告
  • 欢迎您光临起源地模板网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入钻石VIP
  • svg引入及问题解决

    正文概述 掘金(hlccare)   2021-03-24   1223

    项目使用 vue + webpack + typescript。

    所使用的svg图标为从iconFont上下载得到,需要引入至项目中。

    1. 直接引入

    首先解决如何引入的问题。

    直接使用 import 引入并不可行,需要在shims-vue.d.ts文件中加入以下代码:

    declare module '*.svg' {
      const content: string;
      export default content;
    }
    

    此时通过import得到的为对应的svg的路径,但这并不是我们想最终得到的。

    2. 使用svg-sprite-loader引入

    在js中导入svg图标

    import x from '@/assets/icons/label.svg';
    

    在vue.config.js中加入以下代码:

    const path = require('path')
    
    module.exports = {
      lintOnSave: false,
      chainWebpack: config => {
        const dir = path.resolve(__dirname, 'src/assets/icons') //此处为存放svg的文件目录
        config.module
          .rule('svg-sprite')
          .test(/\.svg$/)
          .include.add(dir).end() //只包含icons目录
          .use('svg-sprite-loader')
          .loader('svg-sprite-loader')
          .options({ extract: false })
          .end()
        config.plugin('svg-sprite').use(require('svg-sprite-loader/plugin'), [{ plainSprite: true }])
        config.module.rule('svg').exclude.add(dir) // 其他svg loader 排除 dir 目录
      }
    }
    

    svg-sprite-loader会把svg变成symbol,symbol对应的id为label,并在symbol外套一个svg,在body里生成。

    在template中使用

    <template>
        <svg>
             <use xlink:href="#xxx"/>
        </svg>
    </template>
    

    3. import目录

    再来解决一个问题:一个一个引入文件并不方便。

    在使用svg-sprite-loader后,我们仍然需要一个一个import,所以来一次性将文件夹下所有文件引入

    const importAll = (requireContext: __WebpackModuleApi.RequireContext) =>
      requireContext.keys().forEach(requireContext);
    try {
      importAll(require.context("../assets/icons", true, /.svg$/));
    } catch (error) {
      console.log(error);
    }
    

    对应的文件夹下以svg结尾的文件都会被引入到当前文件中。

    4. 使用svgo-loader

    在实际使用中遇到的新的问题: 在试图使用css的color属性来指定svg图标的颜色时,不起作用。

    经过查资料和看源文件,发现svg文件中的fill属性指定了颜色,导致修改无效,只要将该属性删除即可。

    但当svg文件较多时,手动删除十分低效,所以此处使用svgo-loader来解决这一问题。

    在vue.config.js中补充这一段代码

      .use('svgo-loader')
      .loader('svgo-loader')
      .tap(options => ({ ...options, plugins: [{ removeAttrs: { attrs: 'fill' } }] })) //删除fill属性
      .end()
    

    5. 封装为Icon组件

    至此,我们已解决了svg的引入及使用问题,但每次使用的需要重复use。

    通过封装Icon组件,来减少重复书写代码。

    template部分

    <template>
      <svg class="icon">
        <use :xlink:href="'#' + name" />
      </svg>
    </template>
    

    script部分

    <script lang='ts'>
    const importAll = (requireContext: __WebpackModuleApi.RequireContext) =>
      requireContext.keys().forEach(requireContext);
    try {
      importAll(require.context("../assets/icons", true, /.svg$/));
    } catch (error) {
      console.log(error);
    }
    export default {
      name: "Icon",
      props: ["name"],
    };
    </script>
    

    该Icon组件接收properyname,通过此参数可指定使用的svg图标。

    <Icon name="money" />
    

    浏览发现一篇其他人写的对代码原理更详细解释的博客, 使用 svg-sprite-loader、svgo-loader 优化项目中的 Icon


    起源地下载网 » svg引入及问题解决

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    模板不会安装或需要功能定制以及二次开发?
    请QQ联系我们

    发表评论

    还没有评论,快来抢沙发吧!

    如需帝国cms功能定制以及二次开发请联系我们

    联系作者

    请选择支付方式

    ×
    迅虎支付宝
    迅虎微信
    支付宝当面付
    余额支付
    ×
    微信扫码支付 0 元