@ahcbg/icon-vue

Vue Svg Icon Components

安装

npm install @ahcbg/icon-vue

全量引入

import Vue from "vue";
import IconBox from "@ahcbg/icon-vue";
import App from "./App.vue";

Vue.use(IconBox);

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

引用图标

<template>
  <AlertFilled :size="24" />
</template>

<script>
  import { AlertFilled } from "@ahcbg/icon-vue";

  export default {
    components: {
      AlertFilled,
    },
  };
</script>

自动按需引用图标

可以使用 babel-plugin-import 来按需加载图标。 配置 .babelrc

{
  "plugins": [
    [
      "import",
      {
        "libraryName": "@ahcbg/icon-vue",
        "libraryDirectory": "build/esm/icons"
      }
    ]
  ]
}

import { AlertFilled } from "@ahcbg/icon-vue";
////                  👇🏻                        ////
import AlertFilled from "@ahcbg/icon-vue/build/esm/icons/alert-filled";

属性

属性名称	说明	类型	默认值
size	图标的大小，宽高相同	number， string	'24px'
color	图标的颜色，	string	'currentColor'