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

news2024/12/29 5:32:37

前言

需要把若依原有的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));
});