web前端之若依框架圖標對照表、node獲取文件夾中的文件名,并通過數組返回文件名、在html文件中引入.svg文件、require、icon

MENU

  • 前言
  • 效果圖
  • html
  • JavaScrip
  • style
  • node獲取文件夾中的文件名


前言

需要把若依原有的icon的svg文件拿到哦!
注意看生成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));
});

執行指令node readFiles.js

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/166461.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/166461.shtml
英文地址,請注明出處:http://en.pswp.cn/news/166461.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

02 如何快速讀懂一個C++程序

系列文章目錄 02 如何快速讀懂一個C程序 目錄 系列文章目錄 文章目錄 前言 一、C 的基本語法 二、如何看懂一個c程序&#xff1f; 1.了解程序結構 2.C 中的分號 & 語句塊 3.C 注釋 總結 前言 C 是一種高級編程語言&#xff0c;它具有豐富的特性&#xff0c;用于…

CentOS7安裝Docker運行環境

1 引言 Docker 是一個用于開發&#xff0c;交付和運行應用程序的開放平臺。Docker 使您能夠將應用程序與基礎架構分開&#xff0c;從而可以快速交付軟件。借助 Docker&#xff0c;您可以與管理應用程序相同的方式來管理基礎架構。通過利用 Docker 的方法來快速交付&#xff0c;…

11.前綴和、異或前綴和、差分數組練習題

前綴和 前綴和可以用來求滿足條件的子數組的和、個數、長度 更多前綴和題目&#xff1a; 560. 和為 K 的子數組 974. 和可被 K 整除的子數組 1590. 使數組和能被 P 整除 523. 連續的子數組和 525. 連續數組 560. 和為 K 的子數組 中等 給你一個整數數組 nums 和一個整數…

在新疆烏魯木齊的汽車托運

在新疆烏魯木齊要托運的寶! 看過來了 找汽車托運公司了 連夜吐血給你們整理了攻略!! ??以下&#xff1a; 1 網上搜索 可以在搜索引擎或專業的貨運平臺上搜索相關的汽車托運公司信息。在網站上可以了解到公司的服務范圍、托運價格、運輸時效等信息&#xff0c;也可以參考其他車…

2024年的云趨勢:云計算的前景如何?

本文討論了2024年云計算的發展趨勢。 適應復雜的生態系統、提供實時功能、優先考慮安全性和確保可持續性的需求正在引領云計算之船。多樣化的工作負載允許探索通用的公共云基礎設施范例之外的選項。由于需要降低成本、提高靈活性和降低風險&#xff0c;混合云和多云系統越來越受…

RabbitMQ 消息隊列編程

安裝與配置 安裝 RabbitMQ 讀者可以在 RabbitMQ 官方文檔中找到完整的安裝教程&#xff1a;Downloading and Installing RabbitMQ — RabbitMQ 本文使用 Docker 的方式部署。 RabbitMQ 社區鏡像列表&#xff1a;https://hub.docker.com/_/rabbitmq 創建目錄用于映射存儲卷…

YOLOv5 分類模型 預處理 OpenCV實現

YOLOv5 分類模型 預處理 OpenCV實現 flyfish YOLOv5 分類模型 預處理 PIL 實現 YOLOv5 分類模型 OpenCV和PIL兩者實現預處理的差異 YOLOv5 分類模型 數據集加載 1 樣本處理 YOLOv5 分類模型 數據集加載 2 切片處理 YOLOv5 分類模型 數據集加載 3 自定義類別 YOLOv5 分類模型…

Bin、Hex、ELF、AXF的區別

1.Bin Bin文件是最純粹的二進制機器代碼, 或者說是"順序格式"。按照assembly code順序翻譯成binary machine code&#xff0c;內部沒有地址標記。Bin是直接的內存映象表示&#xff0c;二進制文件大小即為文件所包含的數據的實際大小。 BIN文件就是直接的二進制文件&…

關于python 語音轉字幕,字幕轉語音大雜燴

文字轉語音 Python語音合成之第三方庫gTTs/pyttsx3/speech橫評(內附使用方法)_python_腳本之家 代碼示例 from gtts import gTTStts gTTS(你好你在哪兒&#xff01;,langzh-CN)tts.save(hello.mp3)import pyttsx3engine pyttsx3.init() #創建對象"""語速"…

目前比較好用的護眼臺燈,小學生適合的護眼臺燈推薦

隨著技術的發展&#xff0c;燈光早已成為每家每戶都需要的東西。但是燈光不好可能會對眼睛造成傷害是很多人沒有注意到的。現在隨著護眼燈產品越來越多&#xff0c;市場上臺燈的選擇越來越多樣化&#xff0c;如何選擇一個對眼睛無傷害、無輻射的臺燈成為許多家長首先要考慮的問…

【C++初階】四、類和對象(構造函數、析構函數、拷貝構造函數、賦值運算符重載函數)

相關代碼gitee自取&#xff1a; C語言學習日記: 加油努力 (gitee.com) 接上期&#xff1a; 【C初階】三、類和對象 &#xff08;面向過程、class類、類的訪問限定符和封裝、類的實例化、類對象模型、this指針&#xff09; -CSDN博客 引入&#xff1a;類的六個默認成員函數…

如何使用springboot服務端接口公網遠程調試——實現HTTP服務監聽

&#x1f308;個人主頁&#xff1a;聆風吟 &#x1f525;系列專欄&#xff1a;網絡奇遇記、Cpolar雜談 &#x1f516;少年有夢不應止于心動&#xff0c;更要付諸行動。 文章目錄 &#x1f4cb;前言一. 本地環境搭建1.1 環境參數1.2 搭建springboot服務項目 二. 內網穿透2.1 安裝…

ATA-2042高壓放大器在細胞的剪切應力傳感器研究中的應用

微流控技術是一種通過微小的通道和微型裝置對流體進行精確操控和分析的技術。它是現代醫學技術發展過程中的一種重要的生物醫學工程技術&#xff0c;具有廣泛的應用前景和重要性。它在高通量分析、個性化醫療、細胞篩選等方面有著巨大的潛力&#xff0c;Aigtek安泰電子今天就將…

.Net面試題4

1.請解釋一下泛型&#xff08;Generics&#xff09;在C#中的作用。 泛型是一種將數據類型參數化的機制&#xff0c;使得代碼可以在編譯時具有更強的類型安全性和靈活性。C#中的泛型可以用于類、接口、方法等的定義和實例化。泛型允許在編寫代碼時使用具有不同實參的類型&#x…

HR8833 雙通道H橋電機驅動芯片

HR8833為玩具、打印機和其它電機一T化應用提供一種雙通道電機驅動方案。HR8833提供兩種封裝&#xff0c;一種是帶有L露焊盤的TSSOP-16封裝&#xff0c;能改進散熱性能&#xff0c;且是無鉛產品&#xff0c;引腳框采用100&#xff05;無錫電鍍。另一種封裝為SOP16&#xff0c;不…

智駕芯片全矩陣「曝光」,這家企業的車載品牌正式官宣

隨著汽車智能化加速&#xff0c;智能駕駛芯片格局逐漸清晰。 針對L0-L2&#xff0c;業內基本采用智能前視一體機方案&#xff1b;要實現高速NOA、城市NOA等更為高階的智駕功能等&#xff0c;則基本采用域控制器方案。從前視一體機至域控&#xff0c;再逐步演進到艙駕一體、中央…

python基于DETR(DEtection TRansformer)開發構建鋼鐵產業產品智能自動化檢測識別系統

在前文中我們基于經典的YOLOv5開發構建了鋼鐵產業產品智能自動化檢測識別系統&#xff0c;這里本文的主要目的是想要實踐應用DETR這一端到端的檢測模型來開發構建鋼鐵產業產品智能自動化檢測識別系統。 DETR (DEtection TRansformer) 是一種基于Transformer架構的端到端目標檢…

springboot項目修改項目名稱

參考該文章正確修改項目名稱&#xff1a;SpringBoot項目怎么重命名_springboot修改項目名稱-CSDN博客

【Lodash】 Filter 與Map 的結合使用

用Filter過濾數據之后&#xff0c;想給某個字段重新賦值 在使用 filter() 方法過濾數據后&#xff0c;如果你想給某個字段賦值&#xff0c;你可以使用 map() 方法來修改數組中的元素。map() 方法可以對數組中的每個元素應用一個函數&#xff0c;并返回一個新的數組。 以下是一…

【Django使用】10大章31模塊md文檔,第5篇:Django模板和數據庫使用

當你考慮開發現代化、高效且可擴展的網站和Web應用時&#xff0c;Django是一個強大的選擇。Django是一個流行的開源Python Web框架&#xff0c;它提供了一個堅實的基礎&#xff0c;幫助開發者快速構建功能豐富且高度定制的Web應用 全套Django筆記直接地址&#xff1a; 請移步這…