彩色icon使用教程，用腻了黑白的图标，那就来试试彩色的吧

layzz

于 2022-05-27 09:22:24 发布

阅读量924

点赞数 1

分类专栏： Vue 文章标签： vue.js css

本文链接：https://blog.youkuaiyun.com/qq_41887644/article/details/124970385

版权

Vue 专栏收录该内容

2 篇文章

订阅专栏

标题结合阿里图标库实现彩色图标

阿里图标库：https://www.iconfont.cn/
在这里插入图片描述

首先在阿里图标库中选择想要使用的图标

在这里插入图片描述
添加入库

将图标加入项目

获取iconfont.js文件

在这里插入图片描述

在这里插入图片描述

编写svgicon组件

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

<script>
export default {
  name: "SvgIcon",
  props: {
    iconClass: {
      required: true,
      type:String,
    },
  },
};
</script>

<style lang="less" scoped>
.icon{
  width: 25px;
  height: 25px;
  margin-right: 20px;
}
</style>