# Icon 图标

用于展示 SVG 图标。

# 用法

# 基础用法

<sui-icon name="search"></sui-icon>

效果示例：

# 属性

# name

类型：String
用法：

<sui-icon name="search"></sui-icon>

图标名称，所有图标：

normal	outline	thin	circle	circle-outline

`add`	`add-outline`	`add-thin`	`add-circle`	`add-circle-outline`

`arrow-back`	`arrow-back-outline`	`arrow-back-thin`	`arrow-back-circle`	`arrow-back-circle-outline`

`arrow-down`	`arrow-down-outline`	`arrow-down-thin`	`arrow-down-circle`	`arrow-down-circle-outline`

`arrow-dropdown`	`arrow-dropdown-outline`	`arrow-dropdown-thin`	`arrow-dropdown-circle`	`arrow-dropdown-circle-outline`

`arrow-dropleft`	`arrow-dropleft-outline`	`arrow-dropleft-thin`	`arrow-dropleft-circle`	`arrow-dropleft-circle-outline`

`arrow-dropright`	`arrow-dropright-outline`	`arrow-dropright-thin`	`arrow-dropright-circle`	`arrow-dropright-circle-outline`

`arrow-dropup`	`arrow-dropup-outline`	`arrow-dropup-thin`	`arrow-dropup-circle`	`arrow-dropup-circle-outline`

`arrow-forward`	`arrow-forward-outline`	`arrow-forward-thin`	`arrow-forward-circle`	`arrow-forward-circle-outline`

`arrow-up`	`arrow-up-outline`	`arrow-up-thin`	`arrow-up-circle`	`arrow-up-circle-outline`

`bad`	`bad-outline`	`bad-thin`	`bad-circle`	`bad-circle-outline`

`bookmarks`	`bookmarks-outline`	`bookmarks-thin`	`bookmarks-circle`	`bookmarks-circle-outline`

`calendar`	`calendar-outline`	`calendar-thin`	`calendar-circle`	`calendar-circle-outline`

`check`	`check-outline`	`check-thin`	`check-circle`	`check-circle-outline`

`close`	`close-outline`	`close-thin`	`close-circle`	`close-circle-outline`

`copper`	`copper-outline`	`copper-thin`	`copper-circle`	`copper-circle-outline`

`crown`	`crown-outline`	`crown-thin`	`crown-circle`	`crown-circle-outline`

`edit`	`edit-outline`	`edit-thin`	`edit-circle`	`edit-circle-outline`

`eye`	`eye-outline`	`eye-thin`	`eye-circle`	`eye-circle-outline`

`female`	`female-outline`	`female-thin`	`female-circle`	`female-circle-outline`

`fire`	`fire-outline`	`fire-thin`	`fire-circle`	`fire-circle-outline`

`flag`	`flag-outline`	`flag-thin`	`flag-circle`	`flag-circle-outline`

`follow`	`follow-outline`	`follow-thin`	`follow-circle`	`follow-circle-outline`

`fresh`	`fresh-outline`	`fresh-thin`	`fresh-circle`	`fresh-circle-outline`

`funnel`	`funnel-outline`	`funnel-thin`	`funnel-circle`	`funnel-circle-outline`

`gift`	`gift-outline`	`gift-thin`	`gift-circle`	`gift-circle-outline`

`good`	`good-outline`	`good-thin`	`good-circle`	`good-circle-outline`

`group`	`group-outline`	`group-thin`	`group-circle`	`group-circle-outline`

`happy`	`happy-outline`	`happy-thin`	`happy-circle`	`happy-circle-outline`

`headset`	`headset-outline`	`headset-thin`	`headset-circle`	`headset-circle-outline`

`history`	`history-outline`	`history-thin`	`history-circle`	`history-circle-outline`

`home`	`home-outline`	`home-thin`	`home-circle`	`home-circle-outline`

`letter`	`letter-outline`	`letter-thin`	`letter-circle`	`letter-circle-outline`

`loading`	`loading-outline`	`loading-thin`	`loading-circle`	`loading-circle-outline`

`male`	`male-outline`	`male-thin`	`male-circle`	`male-circle-outline`

`menu`	`menu-outline`	`menu-thin`	`menu-circle`	`menu-circle-outline`

`message`	`message-outline`	`message-thin`	`message-circle`	`message-circle-outline`

`my-answer`	`my-answer-outline`	`my-answer-thin`	`my-answer-circle`	`my-answer-circle-outline`

`my-question`	`my-question-outline`	`my-question-thin`	`my-question-circle`	`my-question-circle-outline`

`paper`	`paper-outline`	`paper-thin`	`paper-circle`	`paper-circle-outline`

`picture`	`picture-outline`	`picture-thin`	`picture-circle`	`picture-circle-outline`

`pin`	`pin-outline`	`pin-thin`	`pin-circle`	`pin-circle-outline`

`play`	`play-outline`	`play-thin`	`play-circle`	`play-circle-outline`

`sad`	`sad-outline`	`sad-thin`	`sad-circle`	`sad-circle-outline`

`search`	`search-outline`	`search-thin`	`search-circle`	`search-circle-outline`

`setting`	`setting-outline`	`setting-thin`	`setting-circle`	`setting-circle-outline`

`share`	`share-outline`	`share-thin`	`share-circle`	`share-circle-outline`

`sort`	`sort-outline`	`sort-thin`	`sort-circle`	`sort-circle-outline`

`star`	`star-outline`	`star-thin`	`star-circle`	`star-circle-outline`

`time`	`time-outline`	`time-thin`	`time-circle`	`time-circle-outline`

`topic`	`topic-outline`	`topic-thin`	`topic-circle`	`topic-circle-outline`

`trash`	`trash-outline`	`trash-thin`	`trash-circle`	`trash-circle-outline`

# url

用于加载第三方 iconfont

# load-default-icons

不加载内置 iconfont

# fill

类型：Number String
用法：

<!-- 默认主题色号 -->
<sui-icon name="search" :fill="2.1"></sui-icon>

<!-- 具体颜色值 -->
<sui-icon name="search" fill="#000"></sui-icon>

1
2
3
4
5

设置图标颜色，可以是默认主题色号，也可以是具体颜色值，效果示例：

← Confirm 确认框 Image 图片 →