iconfont引入彩色svg（symbol引入）_iconfont symbol引入使用有彩色-优快云博客

本文链接：https://blog.youkuaiyun.com/kumokoya/article/details/131516033

文章介绍了如何上传彩色图标并下载压缩包，然后在项目中通过CSS和JS文件引用图标。特别是，文章详细讲解了如何通过`import`方式引入CSS和JS，以及如何创建和使用SVG图标组件，提供了具体的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.上传彩色icon
2.下载压缩包
3.复制css及js文件(css头部文件替换)
4.symbol方式引入（引入方式demo.html中有详解）

引入css文件
通过import方式引入js文件（按照demo方式script标签引入会报错）

✖　<script src="./iconfont.js"></script>
〇　import "@/assets/font/iconfont.js"

css通用代码

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

引入（可封装成组件）

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

封装成组件完整代码

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

<script lang="ts">
import "@/assets/font/iconfont.js"

export default defineComponent({
  name: 'SvgIcon',
  props: {
    prefix: {
      type: String,
      default: 'icon'
    },
    name: {
      type: String,
      required: true
    }
  },
  setup(props) {
    const symbolId = computed(() => `#${props.prefix}-${props.name}`)
    return { symbolId }
  }
})
</script>
<style lang="scss" scoped>
.svg-icon-spin {
  height: 42px;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>