首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Icon 图标

概述

iView 的图标使用开源项目 ionicons 3.x 版本。

如何使用

使用<Icon />组件,指定图标对应的type属性,示例代码:

代码语言:javascript
复制
<Icon type="ios-checkmark" />

渲染后为:

代码语言:javascript
复制
<i class="ivu-icon ivu-icon-ios-checkmark"></i>

API

Icon props

属性

说明

类型

默认值

type

图标的名称

String

-

size

图标的大小,单位是 px

Number | String

-

color

图标的颜色

String

-

custom

自定义图标

String

-

自定义图标用法

iView 的 Icon 支持使用第三方自定义图标,你可以引入任意的字体文件库来使用。

代码语言:javascript
复制
<template>
    <div>
        <Icon custom="i-icon i-icon-shop_fill" size="24" />
        <Icon custom="i-icon i-icon-publishgoods_fill" size="24" />
        <Icon custom="i-icon i-icon-financial_fill" size="24" />
    </div>
</template>

<style>
    @font-face {
        font-family: "custom-font";
/*
* 提示:该行代码过长,系统自动注释不进行高亮。一键复制会移除系统注释 
* src: url(?developer/section/1489923/&) format('woff');
*/
    }
    
    .i-icon {
        display: inline-block;
        font-family: 'custom-font' !important;
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        text-rendering: auto;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        vertical-align: middle;
    }
    
    .i-icon-accessory:before { content: "e6dd"; }
    
    .i-icon-activity:before { content: "e6de"; }
    
    .i-icon-activity_fill:before { content: "e6df"; }
    
    .i-icon-add:before { content: "e6e0"; }
    
    .i-icon-addressbook_fill:before { content: "e6e2"; }
    
    .i-icon-addressbook:before { content: "e6e3"; }
    
    .i-icon-barrage_fill:before { content: "e6e4"; }
    
    .i-icon-barrage:before { content: "e6e5"; }
    
    .i-icon-browse_fill:before { content: "e6e6"; }
    
    .i-icon-browse:before { content: "e6e7"; }
    
    .i-icon-brush:before { content: "e6e8"; }
    
    .i-icon-brush_fill:before { content: "e6e9"; }
    
    .i-icon-businesscard_fill:before { content: "e6ea"; }
    
    .i-icon-businesscard:before { content: "e6eb"; }
    
    .i-icon-camera_fill:before { content: "e6ec"; }
    
    .i-icon-camera:before { content: "e6ed"; }
    
    .i-icon-clock_fill:before { content: "e6ee"; }
    
    .i-icon-clock:before { content: "e6ef"; }
    
    .i-icon-close:before { content: "e6f0"; }
    
    .i-icon-collection_fill:before { content: "e6f1"; }
    
    .i-icon-collection:before { content: "e6f2"; }
    
    .i-icon-computer_fill:before { content: "e6f3"; }
    
    .i-icon-computer:before { content: "e6f4"; }
    
    .i-icon-coordinates_fill:before { content: "e6f5"; }
    
    .i-icon-coordinates:before { content: "e6f6"; }
    
    .i-icon-coupons_fill:before { content: "e6f7"; }
    
    .i-icon-coupons:before { content: "e6f8"; }
    
    .i-icon-createtask_fill:before { content: "e6f9"; }
    
    .i-icon-createtask:before { content: "e6fa"; }
    
    .i-icon-customerservice_fill:before { content: "e6fb"; }
    
    .i-icon-customerservice:before { content: "e6fc"; }
    
    .i-icon-delete_fill:before { content: "e6fd"; }
    
    .i-icon-delete:before { content: "e6fe"; }
    
    .i-icon-document:before { content: "e6ff"; }
    
    .i-icon-document_fill:before { content: "e700"; }
    
    .i-icon-dynamic_fill:before { content: "e701"; }
    
    .i-icon-dynamic:before { content: "e702"; }
    
    .i-icon-editor:before { content: "e703"; }
    
    .i-icon-eit:before { content: "e704"; }
    
    .i-icon-emoji_fill:before { content: "e705"; }
    
    .i-icon-emoji:before { content: "e706"; }
    
    .i-icon-enter:before { content: "e707"; }
    
    .i-icon-enterinto:before { content: "e708"; }
    
    .i-icon-enterinto_fill:before { content: "e709"; }
    
    .i-icon-feedback_fill:before { content: "e70a"; }
    
    .i-icon-feedback:before { content: "e70b"; }
    
    .i-icon-flag_fill:before { content: "e70c"; }
    
    .i-icon-flag:before { content: "e70d"; }
    
    .i-icon-flashlight:before { content: "e70e"; }
    
    .i-icon-flashlight_fill:before { content: "e70f"; }
    
    .i-icon-fullscreen:before { content: "e710"; }
    
    .i-icon-group:before { content: "e711"; }
    
    .i-icon-group_fill:before { content: "e712"; }
    
    .i-icon-homepage_fill:before { content: "e713"; }
    
    .i-icon-homepage:before { content: "e714"; }
    
    .i-icon-integral_fill:before { content: "e715"; }
    
    .i-icon-integral:before { content: "e716"; }
    
    .i-icon-interactive_fill:before { content: "e717"; }
    
    .i-icon-interactive:before { content: "e718"; }
    
    .i-icon-keyboard:before { content: "e719"; }
    
    .i-icon-label:before { content: "e71a"; }
    
    .i-icon-label_fill:before { content: "e71b"; }
    
    .i-icon-like_fill:before { content: "e71c"; }
    
    .i-icon-like:before { content: "e71d"; }
    
    .i-icon-live_fill:before { content: "e71e"; }
    
    .i-icon-live:before { content: "e71f"; }
    
    .i-icon-lock_fill:before { content: "e720"; }
    
    .i-icon-lock:before { content: "e721"; }
    
    .i-icon-mail:before { content: "e722"; }
    
    .i-icon-mail_fill:before { content: "e723"; }
    
    .i-icon-message:before { content: "e724"; }
    
    .i-icon-message_fill:before { content: "e725"; }
    
    .i-icon-mine:before { content: "e726"; }
    
    .i-icon-mine_fill:before { content: "e727"; }
    
    .i-icon-mobilephone_fill:before { content: "e728"; }
    
    .i-icon-mobilephone:before { content: "e729"; }
    
    .i-icon-more:before { content: "e72a"; }
    
    .i-icon-narrow:before { content: "e72b"; }
    
    .i-icon-offline_fill:before { content: "e72c"; }
    
    .i-icon-offline:before { content: "e72d"; }
    
    .i-icon-other:before { content: "e72e"; }
    
    .i-icon-picture_fill:before { content: "e72f"; }
    
    .i-icon-picture:before { content: "e730"; }
    
    .i-icon-play:before { content: "e731"; }
    
    .i-icon-play_fill:before { content: "e732"; }
    
    .i-icon-playon_fill:before { content: "e733"; }
    
    .i-icon-playon:before { content: "e734"; }
    
    .i-icon-praise_fill:before { content: "e735"; }
    
    .i-icon-praise:before { content: "e736"; }
    
    .i-icon-prompt_fill:before { content: "e737"; }
    
    .i-icon-prompt:before { content: "e738"; }
    
    .i-icon-redpacket_fill:before { content: "e739"; }
    
    .i-icon-redpacket:before { content: "e73a"; }
    
    .i-icon-refresh:before { content: "e73b"; }
    
    .i-icon-remind_fill:before { content: "e73c"; }
    
    .i-icon-remind:before { content: "e73d"; }
    
    .i-icon-return:before { content: "e73e"; }
    
    .i-icon-right:before { content: "e73f"; }
    
    .i-icon-scan:before { content: "e740"; }
    
    .i-icon-send:before { content: "e741"; }
    
    .i-icon-service_fill:before { content: "e742"; }
    
    .i-icon-service:before { content: "e743"; }
    
    .i-icon-setup_fill:before { content: "e744"; }
    
    .i-icon-setup:before { content: "e745"; }
    
    .i-icon-share_fill:before { content: "e746"; }
    
    .i-icon-share:before { content: "e747"; }
    
    .i-icon-success_fill:before { content: "e748"; }
    
    .i-icon-success:before { content: "e749"; }
    
    .i-icon-suspend:before { content: "e74a"; }
    
    .i-icon-switch:before { content: "e74b"; }
    
    .i-icon-systemprompt_fill:before { content: "e74c"; }
    
    .i-icon-systemprompt:before { content: "e74d"; }
    
    .i-icon-tailor:before { content: "e74e"; }
    
    .i-icon-task:before { content: "e74f"; }
    
    .i-icon-task_fill:before { content: "e750"; }
    
    .i-icon-tasklist_fill:before { content: "e751"; }
    
    .i-icon-tasklist:before { content: "e752"; }
    
    .i-icon-time_fill:before { content: "e753"; }
    
    .i-icon-time:before { content: "e754"; }
    
    .i-icon-translation_fill:before { content: "e755"; }
    
    .i-icon-translation:before { content: "e756"; }
    
    .i-icon-trash:before { content: "e757"; }
    
    .i-icon-trash_fill:before { content: "e758"; }
    
    .i-icon-undo:before { content: "e759"; }
    
    .i-icon-video:before { content: "e75a"; }
    
    .i-icon-video_fill:before { content: "e75b"; }
    
    .i-icon-warning_fill:before { content: "e75c"; }
    
    .i-icon-warning:before { content: "e75d"; }
    
    .i-icon-search:before { content: "e75e"; }
    
    .i-icon-searchfill:before { content: "e75f"; }
    
    .i-icon-publishgoods_fill:before { content: "e760"; }
    
    .i-icon-shop_fill:before { content: "e761"; }
    
    .i-icon-transaction_fill:before { content: "e762"; }
    
    .i-icon-packup:before { content: "e763"; }
    
    .i-icon-unfold:before { content: "e764"; }
    
    .i-icon-financial_fill:before { content: "e765"; }
    
    .i-icon-commodity:before { content: "e766"; }
</style>
  • iView 3 使用的是 ionicons 3.x 的图标,iView 2 使用的是 ionicons 2.x 的图标,如果是从 iView 2 升级至 iView 3,需要查找并修改使用过的图标名称,因为很多图标名称改变了。

扫码关注腾讯云开发者

领取腾讯云代金券

http://www.vxiaotou.com