[JavaScript知识库]vue2引入ionicons图标

安装：npm?install?--save?vue-ionicons

按需引入：

<template>
  <div class="home">
    <AlertIcon/>
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'
import AlertIcon from 'vue-ionicons/dist/ios-alert.vue'
export default {
  name: "Home",
  components: {AlertIcon},
  data() {
    return {};
  },
};
</script>

<style lang="less" scoped>
@import "~vue-ionicons/ionicons.less";
</style>

全局引入：

import Vue from "vue";
import App from "./App.vue";
import "./registerServiceWorker";
import router from "./router";
import store from "./store";
import AllIosIcon from "vue-ionicons/dist/ionicons-ios.js";
//全局使用ionicons图标
Vue.use(AllIosIcon);
Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");

npm官方文档：vue-ionicons - npm

图标库：Ionicons v3: Open-Source Application Icons for iOS and AndroidIonicons is an open-source icon set with 700+ icons crafted for web, iOS, Android, and desktop applications. Ionicons have both Material Design and iOS options.https://ionicframework.com/docs/v3/ionicons/