根据 浏览器直接引入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>