iconPark官网地址ByteDance IconPark

一、找到自己需要的图标，并收藏到项目，然后下载到本地

 二、把js文件放到项目的assets文件夹下

 三、在components文件夹下新建icon文件夹，里面分别创建BIcon.vue和BSvg.vue两个组件，BIcon是为了渲染图标外围的样式

 

BIcon.vue

<template>
  <i class="bi-icon">
    <slot></slot>
  </i>
</template>
<script lang="ts">
import { defineComponent, computed } from "vue";

export default defineComponent({
  name: "BiIcon",
  props: {
    size: {
      type: [String, Number],
      default: 12,
    },
    color: {
      type: String,
    },
  },
  setup(props) {
    const localSize = computed(() => {
      if (typeof props.size === "number") {
        return `${props.size}px`;
      }
      if (/^\d*$/.test(props.size)) {
        return `${props.size}px`;
      }
      return props.size;
    });
    return { localSize };
  },
});
</script>
<style type="text/css" scoped>
.bi-icon {
  color: v-bind(color);
  font-size: v-bind(localSize);
}
</style>

BSvg.vue

<template>
  <svg class="bi-svg" aria-hidden="true">
    <use :xlink:href="`#${name}`"></use>
  </svg>
</template>
<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "BiSvg",
  props: {
    name: {
      type: String,
      default: "",
    },
  },
});
</script>
<style type="text/css" scoped>
.bi-svg {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

新建index.ts文件，导出组件

export { default as BSvg } from "./BSvg.vue";
export { default as BIcon } from "./BIcon.vue";

四、man.ts中引入刚才下载到本地的图标资源

import "@/assets/iconpark.js";

五、页面中使用，这里以使用svg图标为例

<script setup lang="ts">
import { reactive, ref, onMounted } from "vue";
import { useI18n } from "vue-i18n";
import Content from "@/components/Layout/Content.vue";
// 引入组件
import { BIcon, BSvg } from "@/components/Icon";
import useStore from "@/store/index";
import NotImplement from "@/components/NPages/NotImplement.vue";
import { storeToRefs } from "pinia";

const { t } = useI18n();
const { usePublic } = useStore();
// 使用pinia管理选中下标
const { activeIndex } = storeToRefs(usePublic);
onMounted(() => {
  if (activeIndex) {
    marketIndex.value = usePublic.activeIndex;
  } else {
    marketIndex.value = 0;
  }
});
// 选中事件，更改选中下标值
const changeType = (index: any): void => {
  marketIndex.value = index;
};
const marketIndex = ref(0); // 城市订单选中的按钮
// tab选项卡信息，包括路由地址，图标名字等
const marketBtnList = reactive([
  {
    name: t("commercial.marketInsight"),
    val: 1,
    icon: "shichangdongcha",
    to: "/marketing/testdrive",
  },
  {
    name: t("commercial.lead"),
    val: 4,
    icon: "xiansuo",
    to: "/marketing/clue",
  },
  {
    name: t("commercial.order"),
    val: 5,
    icon: "dingdan",
    to: "/marketing/order",
  },

  {
    name: t("commercial.delivery"),
    val: 6,
    icon: "jiaofu",
    to: "/marketing/pay",
  },
  {
    name: t("commercial.store"),
    val: 6,
    icon: "mendian",
    to: "/marketing/pay",
  },
  {
    name: t("commercial.afterSales"),
    val: 6,
    icon: "shouhou",
    to: "/marketing/pay",
  },
]);
</script>

<template>
  <Content disabled-pulling>
    <template #header>
      <div class="market_header">
        <div class="marketing_css">
          <div
            v-for="(item, index) in marketBtnList"
            :key="item.val"
            class="marketing_div"
            @click="changeType(index)"
            :class="{ market_active: index === marketIndex }"
          >
            // 选中时改变颜色
            <BIcon
              size="8.54vw"
              :color="index === marketIndex ? '#fff200' : void 0"
            >
              <BSvg :name="item.icon" />
            </BIcon>
            {{ item.name }}
          </div>
        </div>
      </div>
    </template>

    <div>
      <!-- <RouterView></RouterView> -->
      <NotImplement
        :sub-title="[8, 9].includes(marketIndex) ? $t('common.lanuchDate') : ''"
        style="height: calc(100vh - 120px - 142px)"
      />
    </div>
  </Content>
</template>

<style scoped lang="scss">
.market_header {
  width: 100vw;
}
.marketing_css {
  background: linear-gradient(93.65deg, #0d0d0d 0%, #202020 98.88%);
  padding: 8px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  overflow-x: auto;

  .marketing_div {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-right: 10px;
    font-family: "HarmonyOS Sans SC";
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    &:last-child {
      margin-right: 0px;
    }
  }
}

.market_active {
  font-family: "HarmonyOS Sans SC";
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  color: #fff200 !important;
}
</style>

上面代码是直接在项目中使用的，一个tab选项卡，点击选择图标变色的效果