vue cli 使用 iconfont

作者自由如风

已知 iconfont 是非常好用的图标库，那么如何在项目里使用它呢？

创建 Iconfont 项目

将资源引入到vue cli项目里

在 public/index.html 文件里，添加一行代码

<script src="<实际资源地址>"></script>

引入通用的css类

.icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
}

使用方式

<svg class="icon" aria-hidden="true">
    <use :xlink:href="<实际ID>"></use>
  </svg>

实际ID可以通过 iconfont 后台复制

封装成组件的形式

<template>
  <svg class="icon" aria-hidden="true">
    <use :xlink:href="icon"></use>
  </svg>
</template>

<script>
export default {
  name: "IconFont",
  props: {
    icon: {
      type: String,
      required: true,
    }
  },
  created() {
    if (this.icon == undefined) {
      throw new Error("使用 iconfont 组件比如传入类名");
    }
  }
}
</script>

<style scoped>

</style>

setup 组件

<template>
  <svg class="icon-font" aria-hidden="true">
    <use :xlink:href="icon"></use>
  </svg>
</template>
<script lang="ts" setup>
const props = defineProps({
  icon: {
    type: String,
    required: true,
  },
});

if (props.icon === undefined) {
  throw new Error("使用 IconFont 组件需要传入 icon 属性");
}
</script>
<script lang="ts">
export default {
  name: "IconFont",
};
</script>

<style lang="scss" scoped>
.icon-font {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

使用第三方组件的形式

npm官方地址 支持的是 vue2.x

安装
# install global 
npm install vue-svgicon -g
# install for project 
npm install vue-svgicon --save

类似文章