浏览器直接引入Element Plus时显示所有自带的ICON

最新推荐文章于 2024-05-12 14:23:18 发布

zsh0409

最新推荐文章于 2024-05-12 14:23:18 发布

阅读量573

点赞数 8

分类专栏： element-plus 文章标签：前端 javascript 开发语言 vue elementui

本文链接：https://blog.csdn.net/zsh0409/article/details/135104976

版权

element-plus 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

根据浏览器直接引入Element Plus时替换自带的icon 修改了Element Plus自带的ICON后，经常需要查看所有icon

一般只能直接到生成icon的目录里去找，这样太麻烦，而且如果是团队开发的话，也是很不方便

这时候可以直接用一个页面显示所有的icon，以方便查找，如果是做后台，也可以改造成选择icon的功能

<html>
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0" />
		<!-- Import style -->
		<link rel="stylesheet" href="element-plus/index.css" />
		<script src="vue/vue.global.js"></script>
		<script src="element-plus/index.full.js"></script>
		<script src="element-plus-icons-2.3.1/index.iife.js"></script>
		<title>Element Plus demo</title>
		<style>
			.icons {}

			.icon-item {
				vertical-align: top;
				width: 120px;
				display: inline-block;
				text-align: center;
				background-color: rgba(0, 0, 0, .02);
				border-radius: 3px;
				padding: 29px 0 10px 0;
				margin-right: 10px;
				margin-top: 10px;
				transition: all 0.6s ease;
			}

			.icon-item>.icon {
				width: 32px;
				height: 32px;
			}

			.icon-item>p {
				width: 100%;
				word-break: break-all;
			}

			svg path {
				/* fill: red; */
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div class="icons">
				<template v-for="(item, index) in icons" :key="index">
					<div class="icon-item">
						<component :is="item.name" class="icon"></component>
						<p>{{item.name}}</p>
					</div>

				</template>
			</div>

		</div>

	</body>
	<script>
		const App = {
			el: '#app',
			data() {
				return {
					icons: ElementPlusIconsVue,
				};
			},
		};
		const app = Vue.createApp(App);
		for ([name, comp] of Object.entries(ElementPlusIconsVue)) {
			app.component(name, comp);
		}
		app.use(ElementPlus);
		app.mount("#app");
	</script>
</html>