web前端之若依框架图标对照表、node获取文件夹中的文件名，并通过数组返回文件名、在html文件中引入.svg文件、require、icon-编程知识

web前端之若依框架图标对照表、node获取文件夹中的文件名，并通过数组返回文件名、在html文件中引入.svg文件、require、icon

前言

需要把若依原有的icon的svg文件拿到哦！
注意看生成svg的路径。

效果图

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;
}

node获取文件夹中的文件名

const fs = require('fs');
const path = require('path');// 替换为你的文件夹路径
const folderPath = './svg';// 读取文件夹中的文件
fs.readdir(folderPath, (err, files) => {if (err) return err;// 过滤掉文件夹，只保留文件const fileNames = [];fileNames = files.filter(file => fs.statSync(path.join(folderPath, file)).isFile());console.log('File names in the folder:', JSON.stringify(fileNames));
});