目录
SVG是什么
SVG,指可缩放矢量图形(Scalable Vector Graphics),是用于描述二维矢量图形的一种图形格式,是由万维网联盟制定的开放标准。SVG 使用 XML 格式来定义图形,除了 IE8 之前的版本外,绝大部分浏览器都支持 SVG,可将 SVG 文本直接嵌入 HTML 中显示。
SVG优势
- SVG 可被非常多的工具读取和修改(比如记事本)
- SVG 与 JPEG 和 GIF 图像比起来,尺寸更小,且可压缩性更强。
- SVG 是可伸缩的
- SVG 图像可在任何的分辨率下被高质量地打印
- SVG 可在图像质量不下降的情况下被放大
- SVG 图像中的文本是可选的,同时也是可搜索的(很适合制作地图)
- SVG 可以与 Java 技术一起运行
- SVG 是开放的标准
- SVG 文件是纯粹的 XML
- SVG 绘制的是矢量图,因此对图像进行放大不会失真。
- 基于 XML,可以为每个元素添加 JavaScript 事件处理器。
- 每个图形均视为对象,更改对象的属性,图形也会改变。
- 不适合游戏应用。
SVG下载
iconfont官网
进入官网,自行注册账号,如果有就更好
SVG下载
步骤一
选择自己需要的图标,比如下面
步骤二
下载下来即可,一会放入项目当中
vue项目中使用
插件下载
npm install svg-sprite-loader -save
svgIcon组件创建
步骤一
创建目录如下,components => SvgIcon => svgIcon.vue
步骤二
(1)注意使用
<use xlink:href="#icon-XXX"></use>
XXX代表下载好的svg名称,我下载修改后是water,修改之后就是<use xlink:href="#icon-water"></use>
文件名字如下图
(2)注意样式
注意样式
:想要修改svg的颜色
,必须到svg源文件
里面path
将fill和stroke的值改成
currentColor以后,如果有想要的样式颜色也可以不用修改,然后就可以通过赋值class,修改class的color属性就生效了,修改如下图
源码如下
<template>
<div class="svgIcon">
svgIcon页
<svg aria-hidden="true" class="svgClass">
<!-- <use :xlink:href="iconName" /> -->
<use xlink:href="#icon-water"></use>
</svg>
</div>
</template>
<style scoped>
.svgClass {
color: pink;
}
.svgClass:hover {
color: #409eff;
}
</style>
icons创建
步骤一
所需要创建的目录如下
步骤二
在
iconfont官网
下载的water.svg
放入对应的文件
步骤三
index.js源码如下
import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon/svgIcon'// svg组件
// register globally
Vue.component('svg-icon', SvgIcon)
const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)
步骤四
(1)
全局挂载icons,在main.js里面
目录如下图
(2)
所需要引入的代码如下
import './icons'
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false
import './icons' // 这个代表全局挂载项目当中,所有组件都可以使用icons
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
vue.config.js配置
步骤一
在项目根目录创建vue.config.js,如下图
步骤二
内容如下
const path = require('path')
function resolve(dir) {
return path.join(__dirname, dir)
}
module.exports = {
chainWebpack: config => {
config.module
.rule('svg')
.exclude.add(resolve('src/icons'))
.end()
config.module
.rule('icons')
.test(/\.svg$/)
.include.add(resolve('src/icons'))
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]'
})
.end()
}
}
效果如下图
gitHub源码
gitHub克隆地址:
https://github.com/shuanglei666/Vue-SVG.git
最后
感觉文章好的话记得点个心心和关注和收藏,有错的地方麻烦指正一下,如果需要转载,请标明出处,多谢!!!