svg图片在vue脚手架vue-cli怎么使用

第一种

  • 使用vue2-svg-icon
    npm install vue2-svg-icon --save-dev

  • 下载之后在mian.js引入

    名字可以随便起,这里我起icon

  • 引入svg资源

    这时注意:网上有人说直接在src/根目录引入svg资源,也有人说在src/assets/根目录引入svg资源,两个应该都是对的,可能因为webpack版本不同,svg引入的路径就不同,因此这两种引入方式都试试,我项目webpack版本是2.96的,我在src/assets/引入资源成功,在src/引入svg资源报错。


  • 使用svg图片

    此时只需要把 icon当作一个标签使用即可,name属性指定svg相应资源的名字,不要带后缀名,w、h指定svg图的宽高。

  • 效果图

第二种

第二种我还没有使用过,下一次使用在补上,使用 svg-sprite-loader

猜你喜欢

转载自www.cnblogs.com/HJ412/p/11094986.html