# 品牌图标(Simple Icons) 使用教程

Simple Icon收录了超过1000个免费品牌SVG图标。项目地址:simple-icons/simple-icons,这个项目由Dan Leech发起。 IconHelper.cn对其进行了整理,可以用中文搜索相同图标,项目地址:品牌图标(Simple Icon)中文搜索

# 用法

# 一般用法

可以直接在brands.iconHelper.cn搜索对应的图标,通过下载或复制按钮下载或复制图标,支持Png或svg格式。下载之前可以更改图标的大小和颜色。

# CDN Usage

你也可以通过JSDelivrUnpkg来使用:


<img height="32" width="32" src="https://cdn.jsdelivr.net/npm/simple-icons@latest/icons/[ICON NAME].svg" />
<img height="32" width="32" src="https://unpkg.com/simple-icons@latest/icons/[ICON NAME].svg" />

其中的[ICON NAME]需要替换成图标名称:


<img height="32" width="32" src="https://cdn.jsdelivr.net/npm/simple-icons@latest/icons/simpleicons.svg" />
<img height="32" width="32" src="https://unpkg.com/simple-icons@latest/icons/simpleicons.svg" />

# Node 用法

你也可以通过NPM包安装使用:

$ npm install simple-icons

使用方法:

const simpleIcons = require('simple-icons');

console.log(simpleIcons.get('Simple Icons'));

/*
{
    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 ...'
}
*/

你也可以单独导入所需的图标。如果你是正在使用webpack编译代码的话,这样对减小包的大小非常有用:

const icon = require('simple-icons/icons/simpleicons');

console.log(icon);

/*
{
    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 ...'
}
*/

# TypeScript 用法

Simple Icon包还有TypeScript类型定义,按以下方法使用:

$ npm install @types/simple-icons

# PHP 用法

可以通过Packagist包进行安装:

$ composer require simple-icons/simple-icons

这样使用:

<?php

echo file_get_contents('path/to/package/icons/simple-icons.svg');

// <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">...</svg>
?>

# 第三方扩展

# WordPress

在WordPress中,你可以通过一个简单的插件来使用,由@tjtaylo创建,在这里可以找到。

# Drupal

你可以通过一个模块来使用,由Phil Wolstenholme创建,在这里可以找到。

# Kirby

在Kirby中,你可以通过一个简单的插件来使用,由@runxel创建,在这里可以找到。

# React

在React中,你可以通过一个简单的包来使用,由@wootsbot创建,在这里可以找到。

# icon助手

品牌图标(Simple Icon)中文搜索