0
点赞
收藏
分享

微信扫一扫

Vue--整合SVG Icon图标--方法/实例


简介

说明

        本文介绍Vue如何整合SVG图标。

前端图标的发展

从上到下是从古至今的顺序

  1. 使用img实现
  1. 一个页面的请求资源中图片 img 占了大部分
  1. image sprite(雪碧图)
  1. 将多个图片合成一个图片,然后利用 css 的 background-position 定位显示不同的 icon 图标
  2. 是为了优化方案1而提出的。
  3. 维护困难。每新增一个图标,都需要改动原始图片,还可能影响到前面定位好的图片。
  1. font库
  1. 优点:使用方便
  2. 缺点:找起来不方便,定制化很差,Icon不好看
  1. iconfont
  1. 阿里做的
  2. 图标数量多,有几百个公司的开源图标库,有各式各样的小图标,支持自定义创建图标库。

SVG的好处

        可以轻松地按比例放大和缩小图标。SVG图标是矢量图,具有优于位图图形的优点,即按比例放大或缩小时它们仍然看起来不错。而位图图形在按比例放大时趋于像素化,而在按比例缩小时会失去质量(像素)。

1.创建Vue项目

见:@vue/cli4--使用图形化界面创建项目--方法/实例_IT利刃出鞘的博客

2.安装svg-sprite-loader

npm install svg-sprite-loader -D

3.配置svg-sprite-loader

1.新建存放svg图标的目录

在项目 src 目录下新建 src/icons/svg 目录(存放 svg 图标文件)。

2.创建svg文件的入口文件

在 src/icons 下创建 icons 目录的入口文件 index.js ,负责svg文件的加载

import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'
Vue.component('svg-icon', SvgIcon)

/**
* require.context 的参数说明
* './svg' 代表要查找的文件路径
* false 代表是否查找子目录
* /\.svg$/ 代表要匹配文件的正则
*
*/
const svg = require.context('./svg', false, /\.svg$/)
const requireAll = (requireContext) =>
requireContext.keys().map(requireContext)
requireAll(svg)

3.配置vue.config.js

在vue.config.js中添加如下配置:

'use strict'

const path = require('path')
const resolve = dir => path.join(__dirname, dir)

module.exports = {
chainWebpack (config) {
// 配置 svg-sprite-loader
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()
}
}

4.创建图标组件:SvgIcon.vue

在src/components下创建SvgIcon.vue

(或者:在src/components下创建SvgIcon文件夹,在里边创建index.vue)

内容如下:

<template>
<svg className="svg-icon" aria-hidden="true">
<use :xlink:href="iconName"/>
</svg>
</template>
<style>
.svg-icon {
width: 1.5em;
height: 1.5em;
}
</style>
<script>
export default {
props: {
iconClass: {
type: String,
required: true
}
},
computed: {
iconName () {
return `#icon-${this.iconClass}`
}
}
}
</script>

5.使用SvgIcon组件

1.全局引入icons

在 main.js 入口文件中 全局引入 icons:

import './icons'

2.下载svg文件

        去 ​​iconfont​​ 图标网站下载个svg图标。

        将下载的 svg 图标放置到 src/icons/svg 目录下。这里我下载的是一个搜索图标。

3.在组件中引入svg图标

新建components/Parent.vue

<template>
<div>
<div>
这是Parent。
</div>
<svg-icon icon-class="search"></svg-icon>
</div>
</template>

<script>
export default {
name: 'Parent'
}
</script>

<style scoped>

</style>

修改router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Parent from '../components/Parent'

Vue.use(VueRouter)

const routes = [
{
path: '/',
name: 'Parent',
component: Parent
}
]

const router = new VueRouter({
routes
})

export default router

6.测试

访问:​​http://localhost:8080/#/​​

结果:

Vue--整合SVG Icon图标--方法/实例_ico

7.压缩svg图标(非必须)

        我们从iconfont下载的svg图标已经比较精简了,但里边还是有些无用信息(比如注释)。而且,如果svg图标是从设计那里拿到的,可能会不够精简,这时可以使用svgo来进行压缩。

见:SVGO--使用/实例_IT利刃出鞘的博客

其他网址

​​SVG 使用教程:如何在 Vue 中使用 SVG icon 图标系统 - 卡拉云​​

​​Svg Icon 图标 | vue-element-admin​​

手摸手,带你优雅的使用 icon


举报

相关推荐

0 条评论