iconfont引入彩色svg（symbol引入）

最新推荐文章于 2024-03-27 22:26:36 发布

kumokoya

最新推荐文章于 2024-03-27 22:26:36 发布

阅读量298

点赞数

文章标签： css vue.js

本文链接：https://blog.csdn.net/kumokoya/article/details/131516033

版权

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>