vue iconfont

vue iconfont

ใช้ iconfont.cn อย่างสง่างามยิ่งขึ้นและรองรับทั้ง font-class 引入และ symbol 引入

ติดตั้ง

 # Yarn
yarn add vue-iconfont

# npm
npm i vue-iconfont

CDN: JSDELIVR | UNPKG (สามารถใช้ผ่าน window.VueIconfont )

ใช้

ติดตั้ง VueIconfont ก่อนโดยใช้ Vue.use :

 import Vue from 'vue'
import VueIconfont from 'vue-iconfont'

Vue . use ( VueIconfont /*, options*/ )

// ......

จากนั้นสามารถใช้ในส่วนประกอบเช่นนี้:

 < icon name =" right " /> 

ตัวเลือก

ตัวเลือก	พิมพ์	ค่าเริ่มต้น	อธิบาย
ติดแท็ก	String	icon	ฉลากส่วนประกอบไอคอน
พิมพ์	font svg	font	font : แสดงไอคอนแบบอักษรที่แนะนำด้วย Font-Class svg : แสดงไอคอน SVG ที่แนะนำด้วยสัญลักษณ์
คำนำหน้า	String	-	หมายถึงคำนำหน้าชื่อคลาสหรือคำนำหน้าชื่อไอคอน SVG
ตระกูล	String	= prefix	ใช้ได้เฉพาะเมื่อ type เป็น font แสดงคลาสที่มีชุดสไตล์ font-family
เทพดา	String	-	ใช้ได้เฉพาะเมื่อ type คือ svg มันหมายถึง svg sprite ซึ่งจะโหลดโดยอัตโนมัติเช่น: <svg><symbol id="ok">......</symbol></svg>
ส่วนประกอบ	{ name: String, 'props': Object, beforeRender: context => void }	{ชื่อ: 'ไอคอน', 'อุปกรณ์ประกอบฉาก': {}, beForerender: () => {}}	name แสดงถึงตัวเลือก name ของส่วนประกอบ props แสดงถึงตัวเลือก props ของส่วนประกอบ beforeRender เป็นฟังก์ชั่นที่ได้รับบริบทของการเรนเดอร์ในส่วนประกอบฟังก์ชัน Vue และคุณสามารถใช้การเปลี่ยนแปลงกับบริบท

ตัวอย่างที่สมบูรณ์

การกำหนดค่าโครงการ

1. เปิด图标管理> 我的项目และเลือกโครงการ

2. คลิก更多操作> 编辑项目:

3. ตั้ง FontClass/Symbol 前缀และรายการฟอร์ม Font Family เป็นค่าเดียวกันและค่านี้เป็น prefix ใน options ข้างต้น:

4. คลิก下载至本地เพื่อแยกไฟล์ไอคอนดาวน์โหลดลงในโฟลเดอร์โครงการ

ติดตั้ง

คุณสามารถใช้ Vue.use(VueIconfont, [options1, options2, ..., optionsN]) เพื่อกำหนดส่วนประกอบไอคอนที่แตกต่างกันตามต้องการ

 // index.js
import Vue from 'vue'
import VueIconfont from 'vue-iconfont'
import App from './app.vue'

// 引入上面下载得到的使用 font-class 图标必须的 css 文件
import './iconfont/iconfont.css'

// 引入上面下载得到的使用 SVG 图标必须的 js 文件
import './iconfont/iconfont.js'

Vue . use ( VueIconfont , [
  // 定义 v-icon 组件以使用 font-class 图标
  {
    tag : 'v-icon' ,
    prefix : 'v-icon' ,
    type : 'font'
  } ,

  // 定义 v-svg-icon 组件以使用 SVG 图标
  {
    tag : 'v-svg-icon' ,
    prefix : 'v-icon' ,
    type : 'svg'
  }
] )

new Vue ( {
  el : '#app' ,
  render : h => h ( App )
} )

ใช้

 <!-- app.vue -->
< template >
  < div >
    < v-icon name =" right " />
    < v-svg-icon name =" right " />
  </ div >
</ template > 

วิธีการตั้งค่าสีไอคอนขนาด ฯลฯ ?

เพียงแค่ตั้งค่า CSS:

 < v-icon name =" right " style =" color: red; font-size: 2em; " />
< v-svg-icon name =" right " style =" color: blue; font-size: 14px; " />