iconfont 使用
iconfont 使用
svg引入方式参考文章@十木禾
参考文章@一像素的执着
方法一:svg 引入
- 创建一个 iconfont.js 文件
- 将从 icon-font 网站中下载的代码粘贴进上面的js文件。
- 在 main.js 文件中引入改js文件
使用方式
// 在 main.js 文件中引入 iconfont.js 文件
import './assets/iconfontsvg'
// 正常使用
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-buding"></use>
</svg>
// 可以添加基础的 css样式
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
封装svg组件
//封装 vue组件使用
<template>
<i class="sketch-icon">
<svg class="icon svgfont" aria-hidden="true">
<use :xlink:href="xlinkHref"></use>
</svg>
</i>
</template>
<script>
export default {
name : 'SketchIcon',
props : {
type : {
type : String,
required : true,
},
},
computed : {
xlinkHref() {
return `#${this.type}`;
},
},
};
</script>
<style scoped lang="less">
.sketch-icon {
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
}
</style>
使用方式
<sketch-icon type="sk-sound"/>
方法二：fontclass 引入
- 创建一个 css 文件，将存放图表的代码 粘贴进改css文件。
- 在main.js 中全局引入 该css文件。
使用方式
注意 ： 一定要添加 iconfont 这个前缀
<i class="iconfont icon-wangyiyunyinleclick"></i>
方法三：unicode 引入
- 创建一个 css 文件，将存放图表的代码 粘贴进改css文件。
- 在main.js 中全局引入 该css文件。
使用方式
注意 ： 一定要添加 iconfont 类名
<i class="iconfont"></i>