Skip to content

Icon 图标

提供了一套常用的图标集合。

使用方法

直接通过设置iconiconName 来使用即可。例如:

<template>
  <div class="container">
    <Icon icon="edit" type="danger" color="#3451b2" size="2x" />
    <Icon icon="share" type="danger" color="#3451b2" size="2x" />
    <Icon icon="user" type="danger" color="#3451b2" size="2x" />
    <Button type="primary" icon="search">搜索</Button>
  </div>
</template>

<script setup>
import Icon from '@/components/Icon/Icon.vue'
import Button from '@/components/Button/Button.vue'
</script>

<style scoped>
.container {
  display: flex;
  align-items: center;
}
.container > i,button {
  margin: 0 20px;
}
</style>

图标使用

Icon组件内部使用了fontawesome图标库,可以访问官网搜索图标并查看使用方法:https://fontawesome.com/search

Released under the MIT License.