ZIcon

• 基础的图标库。

WARNING

注意：本图标库引用自 fortawesome，为了节省包体积大小，所以它不包含在组件库中，你在使用它时需要手动安装相关库，安装方法请参考右侧的使用事项。

图标库

<template>
  <div class="page">
    <div class="search">
      <input v-model="keyWords" placeholder="请输入关键词，汉字只支持部分查询，具体查询请使用图标类型的单词如：箭头 = arrow"/>
    </div>
    <div class="grid">
      <div class="grid-item" v-for="item in iconList" @click="copyItem(item)">
        <z-icon class="icon" :icon="item"></z-icon>

        <div class="name">{{item}}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { fas } from "@fortawesome/free-solid-svg-icons";
import { onMounted, ref, watch } from "vue";
import { Message } from "@d7ee/z-base-ui";


const keyWords = ref("");
const iconArr = ref<string[]>([]);
const iconList = ref<string[]>([]);

const dir = new Map([
  ["用户", "user"],
  ["日历", "calendar"],
  ["箭头", "arrow"],
  ["信封", "envelope"],
  ["信", "envelope"],
  ["文件", "file"],
  ["首页", "house"],
  ["家", "house"],
  ["删除", "trash"],
  ["排序", "sort"],
  ["表情", "face"],
  ["标签", "tags"],
  ["电话", "phone"],
])

let timer = 0;
watch(() => keyWords.value, (value) => {
  timer && clearInterval(timer);

  timer = setTimeout(() => {
    if (keyWords.value === value) {
      if (!keyWords.value) {
        iconList.value = iconArr.value;
        return;
      }


      let k: string | null = null;

      if (/^[\u4e00-\u9fa5]+$/.test(keyWords.value) && dir.has(keyWords.value)) k = dir.get(keyWords.value);

      if (!k) {
        iconList.value = iconArr.value.filter((item) => item.includes(keyWords.value));
        return;
      }

      iconList.value = iconArr.value.filter((item) => item.includes(k));
    }
  }, 300);
})

const copyItem = (key) => {
  const input = document.createElement("input");
  input.value = key;

  document.body.appendChild(input);
  input.select();

  document.execCommand("Copy");
  document.body.removeChild(input);

  Message.success("复制成功！")
}

onMounted(() => {
  const node = document.querySelector(".vitepress-demo-preview-description");
  if (node) {
    node.style.display = "none";
  }

  const iconArrs = [];
  Object.keys(fas).forEach(key => {
    if ("iconName" in fas[key] && !iconArrs.includes(fas[key].iconName)) {
      iconArrs.push(fas[key].iconName);
    }
  });

  iconArr.value = iconArrs;
  iconList.value = iconArrs;
})
</script>


<style scoped lang="css">
.grid {
  padding-top: 30px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.grid-item {
  font-size: 24px;
  color: #555555;
  text-align: center;
  padding: 24px 0;
  cursor: pointer;
  transition: 0.5s;
  border-radius: 6px;
}
.grid-item:hover {
  background: #1677ff;
  color: #ffffff;
}
.icon {
  transition: transform 0.5s;
}
.grid-item:hover .icon {
  transform: scale(1.3);
}
.name {
  padding-top: 6px;
  font-size: 14px;
}


.search {
  border: 1px solid #909399;
  width: 100%;
  z-index: 99;
  padding: 6px 24px;
  background-color: #f5f5f5;
  border-radius: 6px;
}
.search input {
  width: 100%;
}
</style>

使用事项

在你打算使用图标前请确保已执行如下操作。

安装

npm i @fortawesome/fontawesome-svg-core -S

npm i @fortawesome/free-solid-svg-icons -S

npm i @fortawesome/vue-fontawesome -S

导入

在main.js 或 ts中添加如下代码。

import { library } from "@fortawesome/fontawesome-svg-core";
import { fas } from "@fortawesome/free-solid-svg-icons";

library.add(fas);

基础用法

使用不同属性实现不同效果或动画，对于图标的大小和颜色可以通过内置的size，color进行设置，也可以通过className中的字体大小和颜色进行设置。

<template>
  <div class="icon-grid">
    <z-icon icon="message" beat></z-icon>
    <z-icon icon="jet-fighter" bounce></z-icon>
    <z-icon icon="phone" shake></z-icon>
    <z-icon icon="arrow-rotate-right" spin></z-icon>
    <z-icon icon="message" fade></z-icon>
    <z-icon icon="message" beatFade></z-icon>
    <z-icon icon="arrow-rotate-right" spinPulse></z-icon>
    <z-icon icon="jet-fighter" border></z-icon>
    <z-icon icon="jet-fighter" flip="both"></z-icon>
    <z-icon icon="jet-fighter" rotation="90"></z-icon>
    <z-icon icon="message" size="2x"></z-icon>
    <z-icon icon="message" color="red"></z-icon>
  </div>
</template>

<script setup lang="ts">

</script>

<style scoped>
.icon-grid {
  grid-gap: 24px;
}
</style>

API

属性名	说明	类型	默认值
icon	组件key	string	—
bounce	跳动	boolean	false
shake	抖动	boolean	false
spin	匀速旋转	boolean	false
fade	褪色，颜色由淡到深	boolean	true
beatFade	淡入淡出	boolean	false
spinPulse	脉冲旋转	boolean	false
border	带边框	boolean	false
flip	翻转	horizontal | vertical | both	—
rotation	旋转	90 | 180 | 270	—
size	大小，详见size	string

size:

2xs | xs | sm | lg | xl | 2xl | 1x | 2x | 3x | 4x | 5x | 6x | 7x | 8x | 9x | 10x