ce27500858
Update the examples in the "Node Usage" section of the README to clarify where you need to specify the brand you're interested in. The approach follows the style of the "CDN Usage" section of the README.
5.6 KiB
Simple Icons
Over 1500 Free SVG icons for popular brands. See them all on one page at SimpleIcons.org. Contributions, corrections & requests can be made on GitHub. Started by Dan Leech.
Usage
General Usage
Icons can be downloaded as SVGs directly from our website - simply click the icon you want, and the download should start automatically.
CDN Usage
Icons can be served from a CDN such as JSDelivr or Unpkg. Simply use the simple-icons npm package and specify a version in the URL like the following:
<img height="32" width="32" src="https://cdn.jsdelivr.net/npm/simple-icons@v4/icons/[ICON NAME].svg" />
<img height="32" width="32" src="https://unpkg.com/simple-icons@v4/icons/[ICON NAME].svg" />
Where [ICON NAME] is replaced by the icon name, for example:
<img height="32" width="32" src="https://cdn.jsdelivr.net/npm/simple-icons@v4/icons/simpleicons.svg" />
<img height="32" width="32" src="https://unpkg.com/simple-icons@v4/icons/simpleicons.svg" />
These examples use the latest major version. This means you won't receive any updates following the next major release. You can use @latest instead to receive updates indefinitely. However, this will result in a 404 error if the icon is removed.
Node Usage
The icons are also available through our npm package. To install, simply run:
$ npm install simple-icons
The API can then be used as follows:
const simpleIcons = require('simple-icons');
// Get a specific icon by its name as:
simpleIcons.get('[ICON NAME]');
// For example:
const icon = simpleIcons.get('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 ...'
}
*/
Alternatively you can import the needed icons individually. This is useful if you are e.g. compiling your code with webpack and therefore have to be mindful of your package size:
// Import a specific icon by its name as:
require('simple-icons/icons/[ICON NAME]');
// For example:
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 ...'
}
*/
Lastly, the simpleIcons object is also enumerable.
This is useful if you want to do a computation on every icon:
const simpleIcons = require('simple-icons');
for (const title in simpleIcons) {
const icon = simpleIcons.get(title);
// do stuff
}
TypeScript Usage
There are also TypeScript type definitions for the Node package. To use them, simply run:
$ npm install @types/simple-icons
PHP Usage
The icons are also available through our Packagist package. To install, simply run:
$ composer require simple-icons/simple-icons
The package can then be used as follows:
<?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>
?>
Third Party Extensions
Drupal
Icons are also available as a Drupal module created by Phil Wolstenholme.
Flutter
Icons are also available as a Flutter package created by @jlnrrg.
Home Assistant
Icons are also available as a Home Assistant plugin created by @vigonotion.
Kirby
Icons are also available as a Kirby plugin created by @runxel.
React
Icons are also available as a React package created by @wootsbot.
Svelte
Icons are also available as a Svelte package created by @wootsbot.
Vue
Icons are also available as a Vue package created by @noahlitvin.
WordPress
Icons are also available as a WordPress plugin created by @tjtaylo.