Icon 图标

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

安装

pnpm

pnpm add @movk-repo/icons-vue

npm

npm add @movk-repo/icons-vue

yarn

yarn add @movk-repo/icons-vue

注册所有图标

在 main.ts 中添加以下内容， 从 @movk-repo/icons-vue 中导入所有图标并注册。

main.ts

import * as MovkIconVue from '@movk-repo/icons-vue'

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

直接使用 SVG 图标

use-svg.vue

<script setup>
import { Binan } from '@movk-repo/icons-vue'
</script>

<template>
  <div flex="~ gap-2 items-center" class="font-size-10">
    <Binan style="width: 1em; height: 1em; margin-right: 8px" />
  </div>
</template>

隐藏源代码

结合 ElIcon 使用

combine-icon.vue

<script lang="ts" setup>
import { Binan, Gongzuodaiban } from '@movk-repo/icons-vue'
</script>

<template>
  <div mb-4 flex="~ items-center" gap-4>
    <ElIcon :size="40" color="#1e90ff">
      <Binan />
    </ElIcon>
    <ElInput :suffix-icon="Gongzuodaiban" />
  </div>
</template>

隐藏源代码

图标集合

名称SVG

• Banlizhong
• Binan
• BusStop
• Cisheng
• Daiban
• Denggere
• Dianli
• Dianlijinggai
• Dianlisheshi
• Dizhen
• Dizhizaihaidian
• Duban
• Fenbu
• Fenchenshebao
• Fengxian
• Getihu
• Gongchang
• Gonggong
• Gongkuang
• Gongzuodaiban
• Gongzuoduban
• Gongzuoyujing
• Gongzuoyuqi
• Guangxiandian
• Guanjian
• Guimo
• Guotu
• Gushu
• Heyong
• Hospital
• Huanjing
• Jianshifangyu
• Jianzhuwu
• Jiaotongshigu
• Jiaotongshuniu
• Jishuidian
• Linye
• Menpai
• Minzheng
• Museum
• Nongmin
• Peak
• Qixiang
• Qiye
• Renkou
• Richang
• Road
• Sanfang
• Shehui
• Shengchan
• Shexiangtou
• Shijiandaiban
• Shijianyujing
• Shijianyuqi
• Shirexian
• Shiwangge
• Shixiang
• Shuiku
• Shuiwen
• Stadium
• Temple
• Tuiwujunren
• Village
• Wanggeyuan
• Weihuapin
• Weijiufangwu
• Xiangmubanlizhong
• Xiangmuyiwancheng
• Xiangzhen
• Xiaofang
• Xiaoxing
• Xingshianjian
• Yiwancheng
• Yixuegelibingli
• Yujing
• Yuqi
• Zhinengju
• Ziranzaihai
• Zoo