Icon 图标

何时使用

你可以在任何希望插入图标的地方插入

开发者注意事项

开发者可以给组件传递除 name、className、style、onClick 之外的其他任意属性，任意属性应该以 "data-" 作为前缀。

代码演示

案例一

vue

<script setup lang="ts">
import { Icon } from '@/library';
</script>

<template>
  <div class="icon-group">
    <div class="icon-item">
      <Icon name="image" style="font-size: 60px; line-height: 1" />
    </div>
    <div class="icon-item">
      <Icon name="backtop" style="font-size: 60px; line-height: 1" />
    </div>
    <div class="icon-item">
      <Icon name="minus-circle" style="font-size: 60px; line-height: 1" />
    </div>
    <div class="icon-item">
      <Icon name="plus-circle" style="font-size: 60px; line-height: 1" />
    </div>
    <div class="icon-item">
      <Icon name="close" style="font-size: 60px; line-height: 1" />
    </div>
    <div class="icon-item">
      <Icon name="rotate-left" style="font-size: 60px; line-height: 1" />
    </div>
    <div class="icon-item">
      <Icon name="rotate-right" style="font-size: 60px; line-height: 1" />
    </div>
    <div class="icon-item">
      <Icon name="swap-outline" style="font-size: 60px; line-height: 1" />
    </div>
    <div class="icon-item">
      <Icon name="arrow-left-bold" style="font-size: 60px; line-height: 1" />
    </div>
    <div class="icon-item">
      <Icon name="arrow-right-bold" style="font-size: 60px; line-height: 1" />
    </div>
  </div>
</template>

<style lang="less" scoped>
.icon-group {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-content: flex-start;
  align-items: flex-start;
}
.icon-item {
  margin: 0 20px 20px 0;
  padding: 20px;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  background: #fff;
}
</style>

<script setup lang="ts">
import { Icon } from '@/library';
</script>

<template>
  <div class="icon-group">
    <div class="icon-item">
      <Icon name="image" style="font-size: 60px; line-height: 1" />
    </div>
    <div class="icon-item">
      <Icon name="backtop" style="font-size: 60px; line-height: 1" />
    </div>
    <div class="icon-item">
      <Icon name="minus-circle" style="font-size: 60px; line-height: 1" />
    </div>
    <div class="icon-item">
      <Icon name="plus-circle" style="font-size: 60px; line-height: 1" />
    </div>
    <div class="icon-item">
      <Icon name="close" style="font-size: 60px; line-height: 1" />
    </div>
    <div class="icon-item">
      <Icon name="rotate-left" style="font-size: 60px; line-height: 1" />
    </div>
    <div class="icon-item">
      <Icon name="rotate-right" style="font-size: 60px; line-height: 1" />
    </div>
    <div class="icon-item">
      <Icon name="swap-outline" style="font-size: 60px; line-height: 1" />
    </div>
    <div class="icon-item">
      <Icon name="arrow-left-bold" style="font-size: 60px; line-height: 1" />
    </div>
    <div class="icon-item">
      <Icon name="arrow-right-bold" style="font-size: 60px; line-height: 1" />
    </div>
  </div>
</template>

<style lang="less" scoped>
.icon-group {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-content: flex-start;
  align-items: flex-start;
}
.icon-item {
  margin: 0 20px 20px 0;
  padding: 20px;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  background: #fff;
}
</style>

Icon API

propName	description	type	default value
name	图标的名称	string	-
其他	其他属性都将直接透传递给Icon组件的根节点	-	-

Icon 图标 ​

何时使用 ​

开发者注意事项 ​

代码演示 ​

Icon API ​

Icon 图标

何时使用

开发者注意事项

代码演示

Icon API