الصفحة الرئيسية>موارد بناء الموقع>تحميل الخط
تنزيل

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 : يمثل أيقونة الخط التي تم تقديمها مع خطوط.
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 } {name: 'icon' ، 'Props': {} ، beforerender: () => {}} يمثل name خيار name للمكون ، ويمثل props خيار props للمكون ، beforeRender هي وظيفة تتلقى سياق العرض في مكون دالة VUE ، ويمكنك تطبيق التغييرات على السياق.

مثال كامل

تكوين المشروع

  1. Open图标管理> 我的项目وحدد مشروعًا.

  2. انقر فوق更多操作> 编辑项目:

  1. قم بتعيين عنصر FontClass/Symbol 前缀وعنصر Font Family على نفس القيمة ، وهذه القيمة هي prefix في options المذكورة أعلاه:

  1. انقر فوق下载至本地لاستخراج تنزيل ملف الأيقونة في مجلد المشروع.

ثَبَّتَ

يمكنك استخدام 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; " />
يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل