DEVICON 是什么网站?
DEVICON（devicon.dev）是一个把编程语言、设计工具和开发工具的标志（logo）汇总到一套图标字体里的开源项目。它的核心用途是：当你在网页或项目里需要展示某个技术栈的图标时，不必自己找图、切图、调格式，直接从网站上选图标、复制代码粘贴到项目里即可。它提供两种使用形式——字体（font）和 SVG，前者适合批量、统一控制大小和颜色，后者适合需要精细控制或只用一个图标的场景。
它提供什么
- 一套图标字体：把所有技术 logo 打包成字体文件，用类似
<i class="devicon-xxx"></i>的方式调用。 - SVG 代码：每个图标都可以直接复制 SVG 代码粘贴进项目，不依赖字体文件。
- 本地安装选项：如果不想用 CDN 或在线引用，可以从 GitHub 仓库下载全部文件，本地编译使用。
- 图标版本管理：网站会显示每个图标的不同版本（因为很多技术 logo 会随品牌更新而变化），你可以选择具体版本。
怎么用：两种方式
方式一：字体版本
- 在网站上选中一个图标。
- 在下方选择版本。
- 复制网站给出的代码，粘贴到你的项目里。
- 把字体引用代码放在 HTML 文件的
<head>中（每个 HTML 文件放一次）。 - 把图标调用代码放在
<body>中需要显示的位置。 - 调整大小：修改该元素的
font-size。
预期结果：页面上出现对应技术的图标，且能像文字一样通过 CSS 控制大小和颜色。
方式二：SVG 版本
- 同样先选图标和版本。
- 复制对应的 SVG 代码。
- 直接粘贴到项目里（可以作为一个元素使用，也可以只用纯 SVG 代码）。
- 调整大小：修改元素的
height和width。
预期结果：图标以矢量形式渲染，缩放不失真，适合需要精确尺寸或只用一个图标的场景。
字体 vs SVG：怎么选
| 维度 | 字体版本 | SVG 版本 |
|---|---|---|
| 引入方式 | 需在 head 引入字体文件 | 直接粘贴代码，无额外依赖 |
| 大小控制 | 改 font-size |
改 height / width |
| 适合场景 | 多处使用、统一风格、批量调用 | 单个图标、精细控制、不想加载字体 |
| 颜色控制 | 通常随文字颜色 | 可通过 SVG 属性控制 |
选择条件：如果你项目里会用到多个技术图标，且希望统一管理，用字体版本更省事；如果你只需要一两个图标，或者对渲染有精确要求，用 SVG 更直接。
使用前需要注意的事
- 网站需要开启 JavaScript：页面本身依赖 JS 才能正常显示和交互，如果浏览器禁用了 JS，会看到提示而无法使用。
- 图标版权归各自所有者：DEVICON 只是汇总，所有产品名、logo、品牌都属于各自公司。网站明确说明，使用这些 logo 需要你自己遵守对应公司/组织的品牌政策，使用本站或图标即表示你知晓这些条件。
- 图标未被货币化：项目声明所有图标/SVG 没有以任何方式盈利。
- 开源与贡献：项目最初由 Konpa 创建（MIT 许可证），由众多贡献者支持。代码和 logo 的贡献通过 GitHub 仓库进行；有版权疑虑或举报滥用可通过 [email protected] 或 Discord 社区联系。
适合谁用
- 做个人主页、作品集、README、技术博客，想快速放上技术栈图标的人。
- 前端项目里需要统一技术图标风格、又不想引入多个图标库的开发者。
- 需要本地化、离线使用图标资源的团队（可下载 GitHub 仓库自行编译）。
如果你只是想快速拿到某个编程语言或工具的官方风格图标并放进项目，DEVICON 基本能一步到位；如果涉及品牌商用或对外发布，记得先确认对应品牌的 logo 使用政策。