平时我们在开发项目的时候，经常会用到一些品牌的图标，去网上找吧，费时费力，有时候找出来的又很大，需要用专门工具处理成我们想要的格式。
开源地址：https://github.com/simple-icons/simple-icons
官方地址：https://simpleicons.org/
我们可以直接从 simpleicons.org 下载 SVG 格式，只需点击您想要的图标的下载按钮，就会下载对应图标的 png 文件：
也可以通过可以通过 jsDelivr 或 unpkg 提供 CDN 链接：
<img height="32" width="32" src="https://cdn.jsdelivr.net/npm/simple-icons@v14/icons/[ICON SLUG].svg" /><img height="32" width="32" src="https://unpkg.com/simple-icons@v14/icons/[ICON SLUG].svg" />
其中 [ICON_SLUG] 替换为您想要使用的图标的 slug，例如：
<img height="32" width="32" src="https://cdn.jsdelivr.net/npm/simple-icons@v14/icons/simpleicons.svg" /><img height="32" width="32" src="https://unpkg.com/simple-icons@v14/icons/simpleicons.svg" />
我们还提设置颜色：
<img height="32" width="32" src="https://cdn.simpleicons.org/[ICON SLUG]" /><img height="32" width="32" src="https://cdn.simpleicons.org/[ICON SLUG]/[COLOR]" /><img height="32" width="32" src="https://cdn.simpleicons.org/[ICON SLUG]/[COLOR]/[DARK_MODE_COLOR]" />
其中 [COLOR] 是可选的，可以替换为您想要使用的图标的十六进制颜色或 CSS 关键字。
颜色默认为 simpleicons.org 网站上显示的图标的 HEX 颜色。
[DARK_MODE_COLOR] 用于深色模式。
当指定值时，将使用 CSS prefers-color-scheme。例如：
<img height="32" width="32" src="https://cdn.simpleicons.org/simpleicons" /><img height="32" width="32" src="https://cdn.simpleicons.org/simpleicons/gray" /><img height="32" width="32" src="https://cdn.simpleicons.org/simpleicons/hotpink" /><img height="32" width="32" src="https://cdn.simpleicons.org/simpleicons/0cf" /><img height="32" width="32" src="https://cdn.simpleicons.org/simpleicons/0cf9" /><img height="32" width="32" src="https://cdn.simpleicons.org/simpleicons/00ccff" /><img height="32" width="32" src="https://cdn.simpleicons.org/simpleicons/00ccff99" /><img height="32" width="32" src="https://cdn.simpleicons.org/simpleicons/orange/pink" /><img height="32" width="32" src="https://cdn.simpleicons.org/simpleicons/_/eee" /><img height="32" width="32" src="https://cdn.simpleicons.org/simpleicons/eee/_" />
我们可以使用 viewbox=auto 参数来获得自动大小的视图框：
<img height="20" src="https://cdn.simpleicons.org/github?viewbox=auto" /><img height="20" src="https://cdn.simpleicons.org/simpleicons?viewbox=auto" /><img height="20" src="https://cdn.simpleicons.org/awesomelists?viewbox=auto" />
我们也可以通过 npm 安装使用图标：
npm install simple-icons建议使用打包器，如 webpack，以移除未使用的图标代码：
// 通过其 slug 导入特定图标：// import { si[ICON_SLUG] } from 'simple-icons'// 例如：// 使用 import/esm 以允许 tree shakingimport {siSimpleicons} from 'simple-icons';// 或者使用 require/cjsconst {siSimpleicons} = require('simple-icons');
以上代码返回一个图标对象：
console.log(siSimpleicons);/*{title: 'Simple Icons',slug: 'simpleicons',hex: '111111',source: 'https://simpleicons.org/',svg: '<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">...</svg>',path: 'M12 12v-1.5c-2.484 ...',guidelines: 'https://simpleicons.org/styleguide',license: {type: '...',url: 'https://example.com/'}}NOTE: the `guidelines` entry will be `undefined` if we do not yet have guidelines for the icon.NOTE: the `license` entry will be `undefined` if we do not yet have license data for the icon.*/
如果您需要遍历所有图标，可以使用：
import * as icons from 'simple-icons';brTypeScript 使用：
import type {SimpleIcon} from 'simple-icons';PHP 使用可以通过 Packagist 包获得：
composer require simple-icons/simple-icons安装后就可以开始使用了：
// 通过其 slug 导入特定图标：echo file_get_contents('path/to/package/icons/[ICON_SLUG].svg');// 例如：echo file_get_contents('path/to/package/icons/simpleicons.svg');// <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">...</svg>
