MENU
前言
效果图
html
<div id="idSvg" class="svg_box"></div>
JavaScrip
let listSvg = ['404', 'bug', 'build', 'button', 'cascader', 'chart', 'checkbox', 'client', 'clipboard', 'code', 'color', 'component', 'dashboard', 'date-range', 'date', 'dict', 'documentation', 'download', 'drag', 'druid', 'edit', 'education', 'email', 'example', 'excel', 'exit-fullscreen', 'eye-open', 'eye', 'form', 'fullscreen', 'github', 'guide', 'icon', 'input', 'international', 'job', 'language', 'link', 'list', 'lock', 'log', 'logininfor', 'message', 'money', 'monitor', 'nacos', 'nested', 'number', 'online', 'password', 'pdf', 'people', 'peoples', 'phone', 'post', 'qq', 'question', 'radio', 'rate', 'redis', 'row', 'search', 'select', 'sentinel', 'server', 'shopping', 'size', 'skill', 'slider', 'star', 'swagger', 'switch', 'system', 'tab', 'table', 'textarea', 'theme', 'time-range', 'time', 'tool', 'tree-table', 'tree', 'upload', 'user', 'validCode', 'wechat', 'zip'];
function initSvg(arr) {
let elStr = '';
for (let i = 0; i < arr.length; i++) {
let item = arr[i];
elStr += `<div class="svg_item"><object data="./svg/${item}.svg"></object><div class="title">${item}</div></div>`;
}
idSvg.innerHTML = elStr;
}
initSvg(listSvg);
style
body {
margin: 0;
background-color: #cecece;
}
::-webkit-scrollbar {
width: 0;
}
::-webkit-scrollbar-horizontal {
display: none;
}
::-webkit-scrollbar-thumb {
display: none;
}
.svg_box {
padding: 6px;
box-sizing: border-box;
display: grid;
grid-template-columns: 50% 50%;
grid-gap: 10px;
}
.svg_item {
border: 1px solid rgb(70, 130, 180);
padding: 6px;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
}
.title {
margin-top: 8px;
font-weight: 700;
font-size: 18px;
}