正片之前先推广下阿里的Iconfont,图库丰富,支持个性化定制,只需添加需要的图标,创建项目下载到本地,放在项目文件目录下即可,推荐大家使用。
iconfont 的三种使用方式
1. Unicode
- 个人习惯在src目录下新建一个icon文件夹存放下载的样式文件
- 然后在src目录下新建style.css文件统一管理样式
@font-face {
font-family: "iconfont";
src: url('./icon/iconfont.eot');
src: url('./icon/iconfont.eot#iefix') format('embedded-opentype'),
url('./icon/iconfont.woff') format('woff'),
url('./icon/iconfont.ttf') format('truetype'),
url('./icon/iconfont.svg#iconfont') format('svg');
}
.iconfont {
font-family:"iconfont" !important;
font-size:56px;
color: red;
font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}
复制代码
import './style.css'
复制代码
<i class="iconfont">&
复制代码
2. Font-class
使用方式与使用unicode相似,只需修改下style.css文件
- 修改 style.css文件(同样别忘了main.js文件中引入)
@import './icon/iconfont.css'
复制代码
<i class="iconfont icon-fenxiang"></i>
复制代码
3. Symbol
区别于unicode与font-class,使用symbol需要引入的是js文件,此方法生成的图标可以不用发送woff|eot|ttf|这些很多个字体库请求了,兼具前两种方法的优点,是正真的矢量图标,推荐使用。
import './icon/iconfont.js'
复制代码
- 在style.css文件中写入图标样式(同样别忘了main.js文件中引入)
.icon {
width: 1em; height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
复制代码
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-fenxiang"></use>
</svg>
复制代码
补充:自己动手封装Icon组件
<template>
<svg class="svg-icon" aria-hidden="true">
<use :xlink:href="iconName"></use>
</svg>
</template>
<script>
export default {
name: 'icon-svg',
props: {
iconClass: {
type: String,
required: true
}
},
computed: {
iconName() {
return `#icon-${this.iconClass}`
}
}
}
</script>
<style>
.svg-icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
复制代码
import IconSvg from '@/components/icon-svg'
Vue.component('icon-svg', IconSvg)
复制代码
<icon-svg icon-class="fenxiang" />
复制代码