本地svg导入

一.建立模板组件

本质上就是构建自定义组件（这里取名:IconSvg）来代替svg标签，目的当然是封装，以便更简单使用。

<template><div class="icon-wrapper"><svg class="icon" aria-hidden="true"><use :xlink:href="iconName"></use></svg></div>
</template><script>
// 引入从iconfont 下载的symbox文件
// import '@/assets/icons/iconfont-svg.js'// 引入本地的svg文件
// 定义一个加载目录的函数
const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('@/assets/icons/svg', false, /\.svg$/)
// 加载目录下的所有的 svg 文件
requireAll(req)
// console.log('I: 加载svg文件:', req.keys())
export default {name: 'IconSvg',props: {name: String,prefix: {type: String,default: 'icon-'}},computed: {iconName () {let name = `#${this.prefix}${this.name}`return name}}
}
</script><style scoped>
/*.icon-wrapper {display: inline-block;
}
.icon {width: 100%;height: 100%;vertical-align: -0.15em;fill: currentColor;overflow: hidden;
}*/.icon-wrapper {/* Using currentColor above letsus use `color` for changing the colorof our icons: */color: red;/* The width and height of the SVGwas previously set to 1em.This allows us to use `font-size`to change the size of our icon: */font-size: 48px;
}.icon {display: inline-block;color: #444444;width: 1em;height: 1em;fill: currentColor;
}</style>

svg文件通过requireAll函数加载目录下的svg文件进行全部加载。

使用模板的方法为:

比如文件名: home.svg, 例子: <IconSvg name="home"/>

一般这个组件作为全局组件，通过以下方式进行全局添加：

在main.js文件（入口文件）

Vue.component('IconSvg', require(组件路径名).default)

2.加载器配置

在1点中:xlink:href是根据id进行定位资源的。

svg里面并没有包含symbolId，需要使用加载器进行加载，因此才会有本步骤。

如果不采用本步骤，可以类似以下的代码：https://codepen.io/Keyamoon/pen/vEXLQX

html文件：

<html>
<head><title>IcoMoon - SVG Icons</title><meta charset="utf-8"><meta name="viewport" content="width=device-width">
</head>
<body>
<svg style="position: absolute; width: 0; height: 0; overflow: hidden" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="icon-home" viewBox="0 0 1024 1024"><title>home</title><path class="path1" d="M512 96l-512 512 96 96 96-96v416h256v-192h128v192h256v-416l96 96 96-96-512-512zM512 512c-35.346 0-64-28.654-64-64s28.654-64 64-64c35.346 0 64 28.654 64 64s-28.654 64-64 64z"></path>
</symbol>
</defs>
</svg><svg class="icon icon-home"><use xlink:href="#icon-home"></use></svg><span> icon-home</span></body>
</html>

body {font: 32px sans-serif; color: #444;margin: 1em;
}
.icon {display: inline-block;color: #444444;width: 1em;height: 1em;fill: currentColor;
}
.icon-home {/* Using currentColor above letsus use `color` for changing the colorof our icons: */color: red;/* The width and height of the SVGwas previously set to 1em.This allows us to use `font-size`to change the size of our icon: */font-size: 48px;
}

以上是额外扩展，回归主题:

在module的rules中加入:

      {test: /(\.svg)(\?.*)?$/,loader: 'svg-sprite-loader',include: [resolve('src/assets/icons/svg')],options: {symbolId: 'icon-[name]'}}

同时test: /\.(png|jpe?g|gif|svg)(\?.*)?$/ 追加exclude: [resolve('src/assets/icons/svg')],

如下：

      {test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,loader: 'url-loader',exclude: [resolve('src/assets/icons/svg')],options: {limit: 10000,name: utils.assetsPath('img/[name].[hash:7].[ext]')}}

src/assets/icons/svg：是存放svg文件的路径，需要根据实际路径进行替换。

3.安装加载器模块。

在第二点使用加载器：svg-sprite-loader，检测下自己的package.json有没有相关依赖，没有的话，在项目根目录cmd调用：

npm install svg-sprite-loader

使用iconfont图标库

在做这个项目的时候，很遗憾，iconfont无法使用。它是阿里的图标库。

地址：iconfont-阿里巴巴矢量图标库

做法参考：iconfont字体图标的使用方法--超简单! - 全堆栈溢出攻城狮 - 博客园

IcoMoon库

这是国外的图标库，访问速度还可以

vue项目使用svg文件相关推荐

vue项目dist编译文件部署到服务器：页面空白、F5刷新报错404、403报错、等等bug - 总结篇
文章目录问题一. vue编译打包dist文件之后部署到线上服务器 ,访问页面却是空白? 问题二.如果不是空白,页面F5之后就又变成空白? 以Nginx服务器为例,(如下图FTP所示) `404报错: ...
webpack打包vue项目之后dist文件夹在本地跑起来
webpack打包vue项目之后dist文件夹在本地跑起来转载为:https://blog.csdn.net/u014054437/article/details/79981307 谢谢博主亲测, ...
快速解决Vue项目打包后文件过大问题
快速解决Vue项目打包后文件过大问题为什么打包后文件过大? 如何快速解决一.路由懒加载[使用es6提案的import()方式] 二.CDN引入为什么打包后文件过大? 移动app项目,使用vue- ...
在style标签中，vue项目引入style文件，外部css文件
在style标签中,vue项目引入style文件,外部css文件一.css是什么? 二.使用步骤 1.使用style标签引入 2.在style标签内使用@import导入总结一.css是什么? ...
Vue项目使用SVG矢量图型基础步骤
什么是svg 可缩放矢量图形是基于可扩展标记语言(标准通用标记语言的子集),用于描述二维矢量图形的一种图形格式.它由万维网联盟制定,是一个开放标准. 优势: SVG 可被非常多的工具读取和修改(比如记 ...
vue项目中svg图（svg标签）的使用方法
几天前,ui无法把我拉进项目iconfont库,只好切了一份svg图包给我,于是琢磨了怎么用,简单地记录一下其实所在项目什么都配置好了,真正用到的只有最后一项 1. 安装依赖 npm install ...
electron打包现成的vue项目成.exe文件，build打包vue项目（quasar 框架）
前言: 公司已有web端vue项目,现在有需求,需要把web端的该项目用electron打包成 .exe 可执行文件. 思考:打包成 .exe 文件,首先需要将vue项目在本地打包成静态可运行文件,其 ...
vue项目使用svg图片
(svg-sprite-loader以及vue2-svg-icon的使用) 第一种方式: 1.安装svg-sprite-loader npm install svg-sprite-lo ...
手把手教你如何Vue项目打包dist文件并Tomcat发布【超级详细】
???作者:bug菌博客:CSDN.掘金等 ??公众号:猿圈奇妙屋 ??特别声明:原创不易,转载请附上原文出处链接和本文声明,谢谢配合. ??版权声明:文章里可能部分文字或者图片来源于互联网或者百度 ...

vue项目使用svg文件

本地svg导入

使用iconfont图标库

IcoMoon库

vue项目使用svg文件相关推荐

最新文章

热门文章