什么是 js-devicon
js-devicon 是一个基于 SVG 的 npm 包，它包含了超过 400 种常见的前端开发技术的图标。
通过 js-devicon，我们可以轻松的在我们的网站或应用程序中使用这些图标。
安装 js-devicon
首先，我们需要在项目目录下初始化 npm：
npm init
然后，我们可以安装 js-devicon：
npm install js-devicon --save
安装完成之后，我们就可以在项目中使用 js-devicon 了。
使用 js-devicon
在我们的项目中使用 js-devicon 只需要三个步骤：
- 引入 js-devicon：
import devicon from 'js-devicon';
- 创建一个 SVG 元素：
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');- 将 devicon 的 SVG 字符串插入到 SVG 元素中：
// 技术名称 const techName = 'html5'; // 获取 SVG 字符串 const svgString = devicon(techName).toString(); // 插入到 SVG 元素中 svg.innerHTML = svgString;
到这一步，我们就可以在我们的网页上看到一个 HTML5 的图标了。
示例代码
下面是一个示例，它会在页面上显示所有的技术的图标。
-- -------------------- ---- ------- ------ ------- ---- ------------- ----- ------------ - ---------------------------------------- -- --------- -------------------------------- -- - -- ---- --- -- ----- --- - ------------------------------------------------------ ------- -- -- --- --- ----- --------- - ----------------------------- -- --- --- --- ------------- - ---------- -- ------ ------------------------------ ---
总结
js-devicon 是一个非常好用的 npm 包，它可以帮助我们在开发网站或应用程序的过程中更好的展示技术信息。
在使用 js-devicon 的时候，我们只需要引入它，然后将 SVG 字符串插入到我们的 SVG 元素中就可以了。
希望这篇教程对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005630081e8991b448e0d85