iconfont的三種使用方式詳解

2019-11-19 13:20:25

字體：大中小

來源：轉載

供稿：網友

在我們項目中經常要使用到iconfont，在此我們使用阿里巴巴矢量庫提供的icon圖標，此圖標庫足夠為我們提供大量的圖標，我們首先需要的事在阿里巴巴矢量圖標庫新建一個自己的賬號，并且新建一個項目，這個項目包含了你所有要用到的圖標。我們需要選中需要的圖標放到自己的項目中，并下載下來放到自己項目下的iconfont文件夾之下。（需要更新圖標時，下載包也需要重新下載更新）

方式一：使用symbol方式（本質是用svg標簽構成的）

第一步：為了代碼更好的復用，我們封裝一個svg-icon組件，代碼如下：

<template> <svg :class="svgClass" aria-hidden="true">  <use :xlink:href="iconName" rel="external nofollow" ></use> </svg></template><script>export default { name: 'svg-icon', props: {  iconClass: {   type: String,   required: true  },  className: {   type: String  } }, computed: {  iconName() {   return `#icon-${this.iconClass}` // 注意：因為此處綁定的svgClass名已經包含#icon，所以復制symbol名字事不需要名字的前綴了  },  svgClass() {   if (this.className) {    return 'svg-icon ' + this.className   } else {    return 'svg-icon'   }  } }}</script><style scoped>.svg-icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden;}</style>

第二步：在main.js中引入

import '@/assets/icons/iconfont.js' //symbol方式的相關文件import '@/assets/icons/iconfont.css' // Unicode和fontclass方式的樣式包import SvgIcon from '@/components/SvgIcon' // 使用icon組件Vue.component('svg-icon', SvgIcon) // 引入全局組件，也可以在局部引入

第三步：使用

在自己需要用到的組件中：

<template> <div> <!--方式一：使用svg--> <svg-icon class="h1" icon-class="iconfontzhizuobiaozhunbduan35"></svg-icon> <svg-icon class="h1" icon-class="hekriconshebeidengpao"></svg-icon> <!--方式二：使用unicode--> <i class="iconfont unicode"></i> <i class="iconfont unicode"></i> <!--方式三：使用iconfontclass--> <span class="iconfont icon-baojingliebiao classicon"></span> </div></template><script>// import '@/assets/icons/iconfont.css'</script><style>  .h1{ width:50px; height:50px; font-size: 100px; } .unicode{ font-size: 30px; } .classicon{  /* 可以自定義icon的顏色與大小 */ font-size: 100px;  color:red; }</style>

另外兩種使用方式是使用unicode和fontclass方式，如上面的代碼所示引入與使用

然后我們談談這三種方式的優缺點吧

unicode：

優點：