vueʹÓÃionicͼ±ê_IonicÍŶӵÄVueͼ±ê¼¯×é¼þ

vueʹÓÃionicͼ±ê

Éù×Ó (vue-ionicons)

Vue Icon Set Components from Ionic Team

IonicÍŶӵÄVueͼ±ê¼¯×é¼þ

Design Icons, sourced from the Ionicons project.

Éè¼Æͼ±ê，À´×ÔIoniconsÏîÄ¿¡£

ÈëÃÅ (Getting started)

1. Install the package

   °²×°Ì×¼þ

   $ npm install --save vue-ionicons

   OR

   Ҫô

   $ yarn add vue-ionicons

2. Import the icon, and declare it as a local component:

   µ¼Èëͼ±ê，²¢½«ÆäÉùÃ÷Ϊ±¾µØ×é¼þ：

   import AlertIcon from 'vue-ionicons/alert.vue'
   
   components: {
     AlertIcon
   }

   OR

   Ҫô

   Declare it as a global component:

   ½«ÆäÉùÃ÷Ϊȫ¾Ö×é¼þ：

   import AlertIcon from 'vue-ionicons/alert.vue'
   
   Vue.component('menu-icon', AlertIcon)

   Note Icon files are kebab cased, e.g. alert-circle.vue, and their default name has -icon appended e.g. alert-circle-icon.

   ×¢Òâͼ±êÎļþ¿¾ÈâÌ×¹Ü，Èçalert-circle.vue ，ËûÃǵÄĬÈÏÃû³Æ¾ßÓÐ-icon¸½¼ÓÀýÈçalert-circle-icon ¡£

3. Then use it in your template code!

   È»ºóÔÚÄúµÄÄ£°å´úÂëÖÐʹÓÃËü！

   <menu-icon />

ͼʾ (Icons)

A list of the icons can be found at the Ionicons Repository

ͼ±êÁбí¿ÉÔÚIonicons´æ´¢¿âÖÐÕÒµ½

Ìáʾ (Tips)

• Use resolve in your Webpack config to clean up the imports:

  ÔÚWebpackÅäÖÃÖÐʹÓÃresolveÇåÀíµ¼Èë：

  resolve: {
     alias : {
       "icons": path.resolve(__dirname, "node_modules/vue-ionicons")
     },
    extensions: [
      ".vue"
    ]
  }

  This will give you much shorter and more readable imports, like import Android from 'icons/android', rather than import Android from 'vue-ionicons/android.vue'. Much better!

  Õ⽫ΪÄúÌṩ¸ü¶Ì，¸üÒ׶ÁµÄµ¼Èë，ÀýÈçimport Android from 'icons/android' import Android from 'vue-ionicons/android.vue' ，¶ø²»ÊÇimport Android from 'vue-ionicons/android.vue' ¡£ ºÃ¶àÁË！

·­Òë×Ô: https://vuejsexamples.com/vue-icon-set-components-from-ionic-team/

vueʹÓÃionicͼ±ê