Icon 图标

wview 提供了一套常用的图标集合。

使用图标

如果你想像用例一样直接使用，你需要全局注册组件，才能够直接在项目里使用。

安装

使用包管理器

shell

# 选择一个你喜欢的包管理器

# NPM
$ npm install @element-plus/icons-vue
# Yarn
$ yarn add @element-plus/icons-vue
# pnpm
$ pnpm install @element-plus/icons-vue

注册所有图标

您需要从 @wview/icons 中导入所有图标并进行全局注册

shell

// main.ts

// 如果您正在使用CDN引入，请删除下面一行。
import * as wview from '@wview/icons'

const app = createApp(App)
for (const [key, component] of Object.entries(wview)) {
  app.component(key, component)
}

基础用法

图标集合

TIP

这是一个提示

System 系统

展开代码

vue

<template>
  <div class="container">
    <table>
      <tr>
        <th><Icon name="jiahao1" /></th>
        <th><Icon name="jianhao" /></th>
        <th><Icon name="jiahao" /></th>
        <th><Icon name="nvsheng" /></th>
        <th><Icon name="nansheng" /></th>
        <th><Icon name="sousuo_o" /></th>
        <th><Icon name="changyongicon-" /></th>
      </tr>
      <tr>
        <th><Icon name="jujiao" /></th>
        <th><Icon name="loading" /></th>
        <th><Icon name="link" /></th>
        <th><Icon name="24gl-headset" /></th>
        <th><Icon name="xingxing" /></th>
        <th><Icon name="xiaoxi-zhihui" /></th>
        <th><Icon name="system" /></th>
      </tr>
      <tr>
        <th><Icon name="shijian" /></th>
        <th><Icon name="xiaoxi" /></th>
        <th><Icon name="preview" /></th>
        <th><Icon name="yulan-guanbi_preview-close-one" /></th>
        <th><Icon name="yisuo" /></th>
        <th><Icon name="suozi" /></th>
        <th><Icon name="gouwuche" /></th>
      </tr>
      <tr>
        <th><Icon name="xiangzuoxuanzhuan" /></th>
        <th><Icon name="xiangyouxuanzhuan" /></th>
        <th><Icon name="BAI-xunhuan" /></th>
        <th><Icon name="jurassic_info" /></th>
        <th><Icon name="bell-off" /></th>
        <th><Icon name="system_role" /></th>
        <th><Icon name="duigoux" /></th>
      </tr>
      <tr>
        <th><Icon name="duigou" /></th>
        <th><Icon name="system_close_round_line" /></th>
        <th><Icon name="system_expired_line" /></th>
        <th><Icon name="cuowu" /></th>
        <th><Icon name="shijian" /></th>
        <th><Icon name="24gl-ellipsis" /></th>
        <th><Icon name="system_expired_fill" /></th>
      </tr>
      <tr>
        <th><Icon name="system_complete_fill" /></th>
        <th><Icon name="wenhao" /></th>
        <th><Icon name="24gf-ellipsis" /></th>
        <th><Icon name="icon-test" /></th>
        <th><Icon name="03fenxiangfill" /></th>
        <th><Icon name="fenxi1" /></th>
        <th><Icon name="set-up_fill" /></th>
      </tr>
    </table>
  </div>
</template>

<script lang="ts" setup>
import { Icon } from 'wviewui'
</script>

<style lang="scss" scoped>
@import './style/common.scss';
</style>

Arrow 方向箭头

展开代码

vue

<template>
  <div class="container">
    <table>
      <tr>
        <th><Icon name="system_arrow_left_line" /></th>
        <th><Icon name="system_arrow_up_line" /></th>
        <th><Icon name="system_arrow_right_line" /></th>
        <th><Icon name="system_arrow_down_line" /></th>
        <th><Icon name="arrow-double-right" /></th>
        <th><Icon name="arrow-double-left" /></th>
        <th><Icon name="cc-arrow-up" /></th>
      </tr>
      <tr>
        <th><Icon name="cc-arrow-down" /></th>
        <th><Icon name="cc-arrow-left" /></th>
        <th><Icon name="cc-arrow-right" /></th>
        <th><Icon name="jiantou_youshang_o" /></th>
        <th><Icon name="jiantou_zuoshang_o" /></th>
        <th><Icon name="jiantou_zuoxia_o" /></th>
        <th><Icon name="jiantou_youxia_o" /></th>
      </tr>
      <tr>
        <th><Icon name="system_sort_line" /></th>
        <th><Icon name="arrow" /></th>
        <th><Icon name="arrow-up-filling" /></th>
        <th><Icon name="arrow-down-filling" /></th>
        <th><Icon name="arrow-left-filling" /></th>
        <th><Icon name="arrow-right-filling" /></th>
        <th><Icon name="arrow_right_arrow_left" /></th>
      </tr>
      <tr>
        <th><Icon name="Arrows" /></th>
      </tr>
    </table>
  </div>
</template>

<script lang="ts" setup>
import { Icon } from 'wviewui'
</script>

<style lang="scss" scoped>
@import './style/common.scss';
</style>

DocumentEditing 文档编辑

展开代码

vue

<template>
  <div class="container">
    <table>
      <tr>
        <th><Icon name="sucai" /></th>
        <th><Icon name="shiyongwendang" /></th>
        <th><Icon name="youjian" /></th>
        <th><Icon name="bianji" /></th>
        <th><Icon name="tianxie" /></th>
        <th><Icon name="wenjian" /></th>
      </tr>
    </table>
  </div>
</template>

<script lang="ts" setup>
import { Icon } from 'wviewui'
</script>

<style lang="scss" scoped>
@import './style/common.scss';
</style>

Media 多媒体

展开代码

vue

<template>
  <div class="container">
    <table>
      <tr>
        <th><Icon name="maikefeng" /></th>
        <th><Icon name="mic-off" /></th>
        <th><Icon name="zanting" /></th>
        <th><Icon name="bofang" /></th>
        <th><Icon name="erji" /></th>
        <th><Icon name="pc" /></th>
        <th><Icon name="fenleisheyingshuma" /></th>
      </tr>
      <tr>
        <th><Icon name="zhaopian" /></th>
        <th><Icon name="taiji" /></th>
        <th><Icon name="shouji" /></th>
        <th><Icon name="sheyingji01" /></th>
        <th><Icon name="charutupian" /></th>
        <th><Icon name="bg-pc" /></th>
        <th><Icon name="zhaoxiangji" /></th>
      </tr>
      <tr>
        <th><Icon name="lingsheng" /></th>
      </tr>
    </table>
  </div>
</template>

<script lang="ts" setup>
import { Icon } from 'wviewui'
</script>

<style lang="scss" scoped>
@import './style/common.scss';
</style>

ConstructionTraffic 建筑交通

展开代码

vue

<template>
  <div class="container">
    <table>
      <tr>
        <th><Icon name="weibiaoti-3" /></th>
        <th><Icon name="bicycle" /></th>
        <th><Icon name="jianzhu_o" /></th>
        <th><Icon name="a-xuexiaojianzhu" /></th>
        <th><Icon name="lubiao" /></th>
        <th><Icon name="lianxiwomendibiao" /></th>
        <th><Icon name="huoche" /></th>
      </tr>
    </table>
  </div>
</template>

<script lang="ts" setup>
import { Icon } from 'wviewui'
</script>

<style lang="scss" scoped>
@import './style/common.scss';
</style>

Food 食物

展开代码

vue

<template>
  <div class="container">
    <table>
      <tr>
        <th><Icon name="xuegao" /></th>
        <th><Icon name="wancan" /></th>
        <th><Icon name="cup" /></th>
        <th><Icon name="jiubei" /></th>
        <th><Icon name="bei" /></th>
        <th><Icon name="gaiwanbei" /></th>
        <th><Icon class="icon" name="wan2" /></th>
      </tr>
      <tr>
        <th><Icon name="bingqilin" /></th>
        <th><Icon name="xiyan" /></th>
        <th><Icon name="jinzhixiyan" /></th>
        <th><Icon name="bingqilin-danse" /></th>
        <th><Icon name="pingguo" /></th>
        <th><Icon name="wandou" /></th>
        <th><Icon name="bangbangtang" /></th>
      </tr>
      <tr>
        <th><Icon name="tangguo" /></th>
        <th><Icon name="hanbao" /></th>
        <th><Icon name="daocha" /></th>
        <th><Icon name="li" /></th>
        <th><Icon name="yingtao" /></th>
        <th><Icon name="putao" /></th>
        <th><Icon name="xuegao1" /></th>
      </tr>
    </table>
  </div>
</template>

<script lang="ts" setup>
import { Icon } from 'wviewui'
</script>

<style lang="scss" scoped>
@import './style/common.scss';
</style>

Goods 物品

展开代码

vue

<template>
  <div class="container">
    <table>
      <tr>
        <th><Icon name="shoubiao" /></th>
        <th><Icon name="shoubiao1" /></th>
        <th><Icon name="gouwuche" /></th>
        <th><Icon name="citie" /></th>
        <th><Icon name="liwu" /></th>
        <th><Icon name="rolled" /></th>
        <th><Icon name="yusan" /></th>
      </tr>
      <tr>
        <th><Icon name="rili" /></th>
        <th><Icon name="jiandao" /></th>
        <th><Icon name="taideng" /></th>
        <th><Icon name="yinhangqia-xianxing" /></th>
        <th><Icon name="qizi1" /></th>
        <th><Icon name="jiangpai" /></th>
        <th><Icon name="jiangbei-" /></th>
      </tr>
      <tr>
        <th><Icon name="bingxiang" /></th>
        <th><Icon name="lanqiu" /></th>
        <th><Icon name="bangqiu" /></th>
        <th><Icon name="biaoqian" /></th>
        <th><Icon name="yuechi" /></th>
        <th><Icon name="yuechi" /></th>
        <th><Icon name="zhinanzhen" /></th>
      </tr>
      <tr>
        <th><Icon name="dayinji_o" /></th>
        <th><Icon name="24gl-bag2" /></th>
        <th><Icon name="24gl-phoneLoudspeaker" /></th>
        <th><Icon name="naozhong" /></th>
        <th><Icon name="badge" /></th>
        <th><Icon name="biaoqian1" /></th>
        <th><Icon name="paiqiu" /></th>
      </tr>
      <tr>
        <th><Icon name="zuqiu" /></th>
        <th><Icon name="annex" /></th>
        <th><Icon name="line-brushshuazi-02" /></th>
        <th><Icon name="mouseM" /></th>
        <th><Icon name="jishiqi" /></th>
        <th><Icon name="yidengjiangjiangbei" /></th>
        <th><Icon name="a-xinpian_huaban1" /></th>
      </tr>
      <tr>
        <th><Icon name="icflag" /></th>
        <th><Icon name="qizi" /></th>
        <th><Icon name="dengpao" /></th>
        <th><Icon name="tianchongxing-" /></th>
        <th><Icon name="24gf-phoneLoudspeaker" /></th>
        <th><Icon name="zhuangshishuazi-2" /></th>
        <th><Icon name="gongjuxiang_1" /></th>
      </tr>
    </table>
  </div>
</template>

<script lang="ts" setup>
import { Icon } from 'wviewui'
</script>

<style lang="scss" scoped>
@import './style/common.scss';
</style>

Weather 天气

展开代码

vue

<template>
  <div class="container">
    <table>
      <tr>
        <th><Icon name="weather_dongxue" /></th>
        <th><Icon name="WeatherRain" /></th>
        <th><Icon name="weather2" /></th>
        <th><Icon name="weather_qing" /></th>
        <th><Icon name="weather_leizhenyu" /></th>
        <th><Icon name="weather_yin" /></th>
        <th><Icon name="weather_xiaoyu" /></th>
      </tr>
      <tr>
        <th><Icon name="weather_wu" /></th>
        <th><Icon name="WeatherMoon" /></th>
      </tr>
    </table>
  </div>
</template>

<script lang="ts" setup>
import { Icon } from 'wviewui'
</script>

<style lang="scss" scoped>
@import './style/common.scss';
</style>

Other 其他

展开代码

vue

<template>
  <div class="container">
    <table>
      <tr>
        <th><Icon name="02_dianpuguanli" /></th>
        <th><Icon name="qizi" /></th>
        <th><Icon name="chrome-fill" /></th>
        <th><Icon name="elemo" /></th>
        <th><Icon name="elemo1" /></th>
      </tr>
    </table>
  </div>
</template>

<script lang="ts" setup>
import { Icon } from 'wviewui'
</script>

<style lang="scss" scoped>
@import './style/common.scss';
</style>

Attributes

参数	说明	类型	可选值	默认值
name	图标名	string	—	—
color	颜色	string	—	#303133

Icon 图标 #

使用图标 #

安装 #

使用包管理器 #

注册所有图标 #

基础用法 #

图标集合 #

System 系统 #

Arrow 方向箭头 #

DocumentEditing 文档编辑 #

Media 多媒体 #

ConstructionTraffic 建筑交通 #

Food 食物 #

Goods 物品 #

Weather 天气 #

Other 其他 #

Attributes #

Icon 图标

使用图标

安装

使用包管理器

注册所有图标

基础用法

图标集合

System 系统

Arrow 方向箭头

DocumentEditing 文档编辑

Media 多媒体

ConstructionTraffic 建筑交通

Food 食物

Goods 物品

Weather 天气

Other 其他

Attributes