yak_handcuffs/src/views/pages/icon.vue

<template>

	<el-tabs type="border-card">
		<el-tab-pane label="自定义图标">
			<h2>使用方法</h2>
			<p style="line-height: 50px">
				直接通过设置类名为 el-icon-lx-iconName 来使用即可。例如：（共{{ iconList.length }}个图标）
			</p>
			<p class="example-p">
				<i class="el-icon-lx-redpacket_fill" style="font-size: 30px; color: #ff5900"></i>
				<span>&lt;i class=&quot;el-icon-lx-redpacket_fill&quot;&gt;&lt;/i&gt;</span>
			</p>
			<p class="example-p">
				<i class="el-icon-lx-weibo" style="font-size: 30px; color: #fd5656"></i>
				<span>&lt;i class=&quot;el-icon-lx-weibo&quot;&gt;&lt;/i&gt;</span>
			</p>
			<p class="example-p">
				<i class="el-icon-lx-emojifill" style="font-size: 30px; color: #ffc300"></i>
				<span>&lt;i class=&quot;el-icon-lx-emojifill&quot;&gt;&lt;/i&gt;</span>
			</p>
			<br />
			<h2>图标</h2>
			<div class="search-box">
				<el-input class="search" size="large" v-model="keyword" clearable placeholder="请输入图标名称"></el-input>
			</div>
			<ul>
				<li class="icon-li" v-for="(item, index) in list" :key="index">
					<div class="icon-li-content">
						<i :class="`el-icon-lx-${item}`"></i>
						<span>{{ item }}</span>
					</div>
				</li>
			</ul>
		</el-tab-pane>
		<el-tab-pane label="Element图标">
			<el-link type="primary" href="https://element-plus.org/zh-CN/component/icon.html#icon-collection"
				target="_blank">前往官方文档查看</el-link>
		</el-tab-pane>
	</el-tabs>
</template>

<script setup lang="ts" name="icon">
import { computed, ref } from 'vue';

const iconList: Array<string> = [
	'attentionforbid',
	'attentionforbidfill',
	'attention',
	'attentionfill',
	'tag',
	'tagfill',
	'people',
	'peoplefill',
	'notice',
	'noticefill',
	'mobile',
	'mobilefill',
	'voice',
	'voicefill',
	'unlock',
	'lock',
	'home',
	'homefill',
	'delete',
	'deletefill',
	'notification',
	'notificationfill',
	'notificationforbidfill',
	'like',
	'likefill',
	'comment',
	'commentfill',
	'camera',
	'camerafill',
	'warn',
	'warnfill',
	'time',
	'timefill',
	'location',
	'locationfill',
	'favor',
	'favorfill',
	'skin',
	'skinfill',
	'news',
	'newsfill',
	'record',
	'recordfill',
	'emoji',
	'emojifill',
	'message',
	'messagefill',
	'goods',
	'goodsfill',
	'crown',
	'crownfill',
	'move',
	'add',
	'hot',
	'hotfill',
	'service',
	'servicefill',
	'present',
	'presentfill',
	'pic',
	'picfill',
	'rank',
	'rankfill',
	'male',
	'female',
	'down',
	'top',
	'recharge',
	'rechargefill',
	'forward',
	'forwardfill',
	'info',
	'infofill',
	'redpacket',
	'redpacket_fill',
	'roundadd',
	'roundaddfill',
	'friendadd',
	'friendaddfill',
	'cart',
	'cartfill',
	'more',
	'moreandroid',
	'back',
	'right',
	'shop',
	'shopfill',
	'question',
	'questionfill',
	'roundclose',
	'roundclosefill',
	'roundcheck',
	'roundcheckfill',
	'global',
	'mail',
	'punch',
	'exit',
	'upload',
	'read',
	'file',
	'link',
	'full',
	'group',
	'friend',
	'profile',
	'addressbook',
	'calendar',
	'text',
	'copy',
	'share',
	'wifi',
	'vipcard',
	'weibo',
	'remind',
	'refresh',
	'filter',
	'settings',
	'scan',
	'qrcode',
	'cascades',
	'apps',
	'sort',
	'searchlist',
	'search',
	'edit',
	'apple-line',
	'baidu-fill',
	'amazon-fill',
	'netease-cloud-music-fill',
	'qq-line',
	'wechat-fill',
	'alipay-fill',
	'android-fill',
	'android-line',
	'whatsapp-line',
	'whatsapp-fill',
	'bilibili-fill',
	'chrome-fill',
	'dingding-fill',
	'dingding-line',
	'apple-fill',
	'github-fill',
	'qq-fill',
	'wechat-pay-fill',
	'windows-line',
	'windows-fill',
	'youtube-line',
	'youtube-fill',
	'wechat-pay-line',
	'zhihu-line'
];

const keyword = ref('');
const list = computed(() => {
	return iconList.filter(item => {
		return item.indexOf(keyword.value) !== -1;
	});
});
</script>

<style scoped>
.example-p {
	height: 45px;
	display: flex;
	align-items: center;
}

.search-box {
	text-align: center;
	margin-top: 10px;
}

.search {
	width: 300px;
}

ul,
li {
	list-style: none;
}

.icon-li {
	display: inline-block;
	padding: 10px;
	width: 120px;
	height: 120px;
}

.icon-li-content {
	display: flex;
	height: 100%;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.icon-li-content i {
	font-size: 36px;
	color: #606266;
}

.icon-li-content span {
	margin-top: 10px;
	color: #787878;
}

.iframe {
	width: 100%;
	height: 700px;
}
</style>