在vue3中使用iconfont图标和自定义的svg图标

创建一个Icon组件，供自定义的svg图标使用和iconfont图标使用

<template>
  <svg class="icon">
    <use :href="id"></use>
  </svg>
</template>

<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  name: 'Icon',
  props: {
    name: String,
  },
  setup(props) {
    const id = ref(`#${props.name}`)
    return {
      id,
    }
  },
})
</script>

<style>
.icon {
  width: 100%;
  height: 100%;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

如何inconfont图标

1. 访问iconfont官网，保存图标到自己创建的项目中，然后点击symbol的形式引入。
2. 将js文件引入public/index.html中。
3. 使用。直接通过class来控制图标样式和大小。class会直接绑定到Icon组件的根组件上。

  <Icon name="icon-weixin" class="icon-weixin"></Icon>
  // 通过class来控制图标的样式
  .icon-weixin {
      width: 20px;
      height: 20px;
      color: red;
    }

定义和使用自定义图标

1. 在public/index.html中设计svg图标。

<svg width="0" height="0">
    <defs>
      <symbol viewBox="0 0 100 100" id="iconRect">
        <rect x="0" y="0" width="100" height="100"></rect>
      </symbol>
    </defs>
  </svg>

2. 使用。

<Icon name="iconRect" class="icon-rect"></Icon>
  // 通过class来控制图标的样式
  .icon-rect {
      width: 20px;
      height: 20px;
      color: red;
    }