Icon 图标
概述
iView 的图标使用开源项目 ionicons 3.x 版本。
如何使用
使用<Icon />
组件,指定图标对应的type
属性,示例代码:
<Icon type="ios-checkmark" />
渲染后为:
<i class="ivu-icon ivu-icon-ios-checkmark"></i>
API
Icon props
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
type | 图标的名称 | String | - |
size | 图标的大小,单位是 px | Number | String | - |
color | 图标的颜色 | String | - |
custom | 自定义图标 | String | - |
自定义图标用法
iView 的 Icon 支持使用第三方自定义图标,你可以引入任意的字体文件库来使用。
<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,需要查找并修改使用过的图标名称,因为很多图标名称改变了。
本文档系腾讯云开发者社区成员共同维护,如有问题请联系 cloudcommunity@tencent.com