Icon

基础渲染

图标颜色、大小可通过 CSS 自行控制。

点击图标复制代码。

• share
• select
• plus
• minus
• search_eliminate
• keyboard
• backspace
• add
• camera
• calendar
• close
• clock
• cart
• copy
• closed_eye
• eye
• coupon
• edit
• delete
• feedback
• good_job
• more
• like
• fire
• location
• home
• link
• notice
• code
• picture
• order
• return
• arrow_right
• arrow_up
• arrow_down
• refresh
• search
• scan
• service
• star
• telephone
• setting
• user_circle
• theme_color
• copy_fill
• cart_fill
• edit_fill
• calendar_fill
• coupon_fill
• like_fill
• eye_fill
• home_fill
• good_job_fill
• location_fill
• fire_fill
• qr_code_fill
• theme_color_fill
• setting_fill
• delete_fill
• telephone_fill
• user_circle_fill
• camera_fill
• star_fill
• notice_fill
• picture_split

<template>
  <ul class="list">
    <li
      v-for="item in icons"
      :key="item"
      class="item"
      @click="handleClick(item)"
    >
      <d-icon :name="item" class="icon" />
      <div class="name">{{ item }}</div>
    </li>
  </ul>
</template>

<script>
  import { copyTextToClipboard } from 'vtils';
  import { Icon } from '@dcbfe/ui';

  export default {
    data() {
      return {
        icons: Icon.props.name.enum,
      };
    },
    methods: {
      handleClick(name) {
        copyTextToClipboard(`<d-icon name="${name}" />`);
        alert('已复制');
      },
    },
  };
</script>

<style lang="scss" scoped>
  .list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    .item {
      border: 1px solid #e8e8e8;
      height: 100px;
      flex: 0 0 100px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin: 5px 0;
      cursor: pointer;
      background-color: white;
      border-radius: 4px;

      .icon {
        font-size: 24px;
      }

      .name {
        font-size: 12px;
        white-space: nowrap;
      }

      &:active {
        background-color: mix(black, white, 10%);
      }
    }
  }
</style>

API

属性

名称	说明	类型	默认值
name	图标名称	share | select | plus | minus | search_eliminate | keyboard | backspace | add | camera | calendar | close | clock | cart | copy | closed_eye | eye | coupon | edit | delete | feedback | good_job | more | like | fire | location | home | link | notice | code | picture | order | return | arrow_right | arrow_up | arrow_down | refresh | search | scan | service | star | telephone | setting | user_circle | theme_color | copy_fill | cart_fill | edit_fill | calendar_fill | coupon_fill | like_fill | eye_fill | home_fill | good_job_fill | location_fill | fire_fill | qr_code_fill | theme_color_fill | setting_fill | delete_fill | telephone_fill | user_circle_fill | camera_fill | star_fill | notice_fill | picture_split	必填

插槽

无

事件

名称	说明	参数
click	点击时触发	名称 说明 类型 e 事件对象 object

贡献者

无