convert-svg2font
It is very annoying to manually download, extract, and replace SVG icons on every icon change.
This package solves this issue.
There are several ways to use this package. You can create your own font icons based on SVG files you might have in your project. It also comes, right out of the box, with a set of icons ready to be used.
Getting started
Install with npm:
npm i convert-svg2fontSVG -> font converter
It is possible to do this conversion using this package.
Add in your package.json file the following entries, changing the values according to your
project:
{
"convert-svg2font": {
// All the icon paths relative to your project OR inside the convert-svg2font project
"icons": string[],
// where to store your fonts
"outputDir": string,
// [optional] once extracted, you can move the fonts to a new directory
"moveFontsDir"?: string,
// [optional] will add on the outputDir some screenshots
"debug"?: boolean
}
}An example of the above configuration:
{
"convert-svg2font": {
"icons": [
"./Albuns.svg",
"./Back.svg",
"./Next.svg",
"./Live.svg",
// The `icons/` path is a convert-svg2font folder. Any non-relative path will resolve to inside convert-svg2font package
// See also the "font path" on the icon table athe the bottom of this page
"icons/Add.svg"
],
"outputDir": "./output",
"debug": true
}
}After installing this package, you can easily generate your fonts like:
npx convert-svg2font generate-fontsAccording to the example above, after running the command generate-fonts, all your
brand new fonts will be inside the ./output. We also extract those fonts to index.ts
and index.js files so you can import/use them like:
import { Add } from './output'
Obviously, you'll also need to import the iconfont.css file into your css, scss,
styl, or less configuration. Example:
/* Add this line */
@import './output/iconfont.css';
body {
/* ... */
}
/* The rest of your code css */Using convert-svg2font internal SVG icons
For react component:
import { Add } from 'convert-svg2font/icons'For simple svg:
import { Add } from 'convert-svg2font/icons'Use only what you actually need! This will make your bundle much smaller.
| Preview | Name | font path | SVG import |
|---|---|---|---|
 |
Add | 'icons/Add.svg' |
import { Add } from 'convert-svg2font/icons' |
 |
AddInnerSquare | 'icons/AddInnerSquare.svg' |
import { AddInnerSquare } from 'convert-svg2font/icons' |
 |
AddSquared | 'icons/AddSquared.svg' |
import { AddSquared } from 'convert-svg2font/icons' |
 |
Agenda | 'icons/Agenda.svg' |
import { Agenda } from 'convert-svg2font/icons' |
 |
Alarm | 'icons/Alarm.svg' |
import { Alarm } from 'convert-svg2font/icons' |
 |
AlarmClock | 'icons/AlarmClock.svg' |
import { AlarmClock } from 'convert-svg2font/icons' |
 |
AlarmClockThick | 'icons/AlarmClockThick.svg' |
import { AlarmClockThick } from 'convert-svg2font/icons' |
 |
AlarmRinging | 'icons/AlarmRinging.svg' |
import { AlarmRinging } from 'convert-svg2font/icons' |
 |
Albums | 'icons/Albums.svg' |
import { Albums } from 'convert-svg2font/icons' |
 |
App | 'icons/App.svg' |
import { App } from 'convert-svg2font/icons' |
 |
Archive | 'icons/Archive.svg' |
import { Archive } from 'convert-svg2font/icons' |
 |
ArchiveDraws | 'icons/ArchiveDraws.svg' |
import { ArchiveDraws } from 'convert-svg2font/icons' |
 |
ArchiveLabeled | 'icons/ArchiveLabeled.svg' |
import { ArchiveLabeled } from 'convert-svg2font/icons' |
 |
ArchiveSimple | 'icons/ArchiveSimple.svg' |
import { ArchiveSimple } from 'convert-svg2font/icons' |
 |
Attachment | 'icons/Attachment.svg' |
import { Attachment } from 'convert-svg2font/icons' |
 |
Back | 'icons/Back.svg' |
import { Back } from 'convert-svg2font/icons' |
 |
BatteryCharged | 'icons/BatteryCharged.svg' |
import { BatteryCharged } from 'convert-svg2font/icons' |
 |
BatteryEmpty | 'icons/BatteryEmpty.svg' |
import { BatteryEmpty } from 'convert-svg2font/icons' |
 |
BatteryLeak | 'icons/BatteryLeak.svg' |
import { BatteryLeak } from 'convert-svg2font/icons' |
 |
BatteryRechargingAlmostFull | 'icons/BatteryRechargingAlmostFull.svg' |
import { BatteryRechargingAlmostFull } from 'convert-svg2font/icons' |
 |
BatteryRechargingFull | 'icons/BatteryRechargingFull.svg' |
import { BatteryRechargingFull } from 'convert-svg2font/icons' |
 |
BatteryRechargingHalf | 'icons/BatteryRechargingHalf.svg' |
import { BatteryRechargingHalf } from 'convert-svg2font/icons' |
 |
BatteryRechargingStart | 'icons/BatteryRechargingStart.svg' |
import { BatteryRechargingStart } from 'convert-svg2font/icons' |
 |
BatterySeparatorFull | 'icons/BatterySeparatorFull.svg' |
import { BatterySeparatorFull } from 'convert-svg2font/icons' |
 |
BatterySeparatorHalf | 'icons/BatterySeparatorHalf.svg' |
import { BatterySeparatorHalf } from 'convert-svg2font/icons' |
 |
BatterySeparatorStart | 'icons/BatterySeparatorStart.svg' |
import { BatterySeparatorStart } from 'convert-svg2font/icons' |
 |
Binoculars | 'icons/Binoculars.svg' |
import { Binoculars } from 'convert-svg2font/icons' |
 |
Blueprint | 'icons/Blueprint.svg' |
import { Blueprint } from 'convert-svg2font/icons' |
 |
Bluetooth1 | 'icons/Bluetooth1.svg' |
import { Bluetooth1 } from 'convert-svg2font/icons' |
 |
Bluetooth | 'icons/Bluetooth.svg' |
import { Bluetooth } from 'convert-svg2font/icons' |
 |
Bookmark | 'icons/Bookmark.svg' |
import { Bookmark } from 'convert-svg2font/icons' |
 |
BookmarkText | 'icons/BookmarkText.svg' |
import { BookmarkText } from 'convert-svg2font/icons' |
 |
Briefcase | 'icons/Briefcase.svg' |
import { Briefcase } from 'convert-svg2font/icons' |
 |
BrokenLink | 'icons/BrokenLink.svg' |
import { BrokenLink } from 'convert-svg2font/icons' |
 |
Calculator | 'icons/Calculator.svg' |
import { Calculator } from 'convert-svg2font/icons' |
 |
CalculatorOperations | 'icons/CalculatorOperations.svg' |
import { CalculatorOperations } from 'convert-svg2font/icons' |
 |
CalendarDate18 | 'icons/CalendarDate18.svg' |
import { CalendarDate18 } from 'convert-svg2font/icons' |
 |
CalendarDate19 | 'icons/CalendarDate19.svg' |
import { CalendarDate19 } from 'convert-svg2font/icons' |
 |
CalendarDueDate | 'icons/CalendarDueDate.svg' |
import { CalendarDueDate } from 'convert-svg2font/icons' |
 |
CalendarFree | 'icons/CalendarFree.svg' |
import { CalendarFree } from 'convert-svg2font/icons' |
 |
CalendarStart | 'icons/CalendarStart.svg' |
import { CalendarStart } from 'convert-svg2font/icons' |
 |
Checked | 'icons/Checked.svg' |
import { Checked } from 'convert-svg2font/icons' |
 |
CheckedTick | 'icons/CheckedTick.svg' |
import { CheckedTick } from 'convert-svg2font/icons' |
 |
Close | 'icons/Close.svg' |
import { Close } from 'convert-svg2font/icons' |
 |
Cloud | 'icons/Cloud.svg' |
import { Cloud } from 'convert-svg2font/icons' |
 |
CloudDownload | 'icons/CloudDownload.svg' |
import { CloudDownload } from 'convert-svg2font/icons' |
 |
CloudIteration | 'icons/CloudIteration.svg' |
import { CloudIteration } from 'convert-svg2font/icons' |
 |
CloudSearch | 'icons/CloudSearch.svg' |
import { CloudSearch } from 'convert-svg2font/icons' |
 |
CloudUpload | 'icons/CloudUpload.svg' |
import { CloudUpload } from 'convert-svg2font/icons' |
 |
CloudWarning | 'icons/CloudWarning.svg' |
import { CloudWarning } from 'convert-svg2font/icons' |
 |
Command | 'icons/Command.svg' |
import { Command } from 'convert-svg2font/icons' |
 |
CompactDisc | 'icons/CompactDisc.svg' |
import { CompactDisc } from 'convert-svg2font/icons' |
 |
Compass | 'icons/Compass.svg' |
import { Compass } from 'convert-svg2font/icons' |
 |
Compose | 'icons/Compose.svg' |
import { Compose } from 'convert-svg2font/icons' |
 |
Controls | 'icons/Controls.svg' |
import { Controls } from 'convert-svg2font/icons' |
 |
Controls1 | 'icons/Controls1.svg' |
import { Controls1 } from 'convert-svg2font/icons' |
 |
Controls2 | 'icons/Controls2.svg' |
import { Controls2 } from 'convert-svg2font/icons' |
 |
Controls3 | 'icons/Controls3.svg' |
import { Controls3 } from 'convert-svg2font/icons' |
 |
Controls4 | 'icons/Controls4.svg' |
import { Controls4 } from 'convert-svg2font/icons' |
 |
Controls5 | 'icons/Controls5.svg' |
import { Controls5 } from 'convert-svg2font/icons' |
 |
Controls6 | 'icons/Controls6.svg' |
import { Controls6 } from 'convert-svg2font/icons' |
 |
Controls7 | 'icons/Controls7.svg' |
import { Controls7 } from 'convert-svg2font/icons' |
 |
Controls8 | 'icons/Controls8.svg' |
import { Controls8 } from 'convert-svg2font/icons' |
 |
Controls9 | 'icons/Controls9.svg' |
import { Controls9 } from 'convert-svg2font/icons' |
 |
CouldCommunication | 'icons/CouldCommunication.svg' |
import { CouldCommunication } from 'convert-svg2font/icons' |
 |
Database1 | 'icons/Database1.svg' |
import { Database1 } from 'convert-svg2font/icons' |
 |
Database2 | 'icons/Database2.svg' |
import { Database2 } from 'convert-svg2font/icons' |
 |
Database3 | 'icons/Database3.svg' |
import { Database3 } from 'convert-svg2font/icons' |
 |
Database | 'icons/Database.svg' |
import { Database } from 'convert-svg2font/icons' |
 |
Diamond | 'icons/Diamond.svg' |
import { Diamond } from 'convert-svg2font/icons' |
 |
Diploma | 'icons/Diploma.svg' |
import { Diploma } from 'convert-svg2font/icons' |
 |
Dislike1 | 'icons/Dislike1.svg' |
import { Dislike1 } from 'convert-svg2font/icons' |
 |
Dislike | 'icons/Dislike.svg' |
import { Dislike } from 'convert-svg2font/icons' |
 |
Divide1 | 'icons/Divide1.svg' |
import { Divide1 } from 'convert-svg2font/icons' |
 |
Divide | 'icons/Divide.svg' |
import { Divide } from 'convert-svg2font/icons' |
 |
Division | 'icons/Division.svg' |
import { Division } from 'convert-svg2font/icons' |
 |
Document | 'icons/Document.svg' |
import { Document } from 'convert-svg2font/icons' |
 |
Download | 'icons/Download.svg' |
import { Download } from 'convert-svg2font/icons' |
 |
Edit1 | 'icons/Edit1.svg' |
import { Edit1 } from 'convert-svg2font/icons' |
 |
Edit | 'icons/Edit.svg' |
import { Edit } from 'convert-svg2font/icons' |
 |
Eject1 | 'icons/Eject1.svg' |
import { Eject1 } from 'convert-svg2font/icons' |
 |
Eject | 'icons/Eject.svg' |
import { Eject } from 'convert-svg2font/icons' |
 |
Equal1 | 'icons/Equal1.svg' |
import { Equal1 } from 'convert-svg2font/icons' |
 |
Equal2 | 'icons/Equal2.svg' |
import { Equal2 } from 'convert-svg2font/icons' |
 |
Equal | 'icons/Equal.svg' |
import { Equal } from 'convert-svg2font/icons' |
 |
Error | 'icons/Error.svg' |
import { Error } from 'convert-svg2font/icons' |
 |
Exit1 | 'icons/Exit1.svg' |
import { Exit1 } from 'convert-svg2font/icons' |
 |
Exit2 | 'icons/Exit2.svg' |
import { Exit2 } from 'convert-svg2font/icons' |
 |
Exit | 'icons/Exit.svg' |
import { Exit } from 'convert-svg2font/icons' |
 |
Eyeglasses | 'icons/Eyeglasses.svg' |
import { Eyeglasses } from 'convert-svg2font/icons' |
 |
FastForward1 | 'icons/FastForward1.svg' |
import { FastForward1 } from 'convert-svg2font/icons' |
 |
FastForward | 'icons/FastForward.svg' |
import { FastForward } from 'convert-svg2font/icons' |
 |
Fax | 'icons/Fax.svg' |
import { Fax } from 'convert-svg2font/icons' |
 |
File1 | 'icons/File1.svg' |
import { File1 } from 'convert-svg2font/icons' |
 |
File2 | 'icons/File2.svg' |
import { File2 } from 'convert-svg2font/icons' |
 |
File | 'icons/File.svg' |
import { File } from 'convert-svg2font/icons' |
 |
Film | 'icons/Film.svg' |
import { Film } from 'convert-svg2font/icons' |
 |
Fingerprint | 'icons/Fingerprint.svg' |
import { Fingerprint } from 'convert-svg2font/icons' |
 |
Flag1 | 'icons/Flag1.svg' |
import { Flag1 } from 'convert-svg2font/icons' |
 |
Flag2 | 'icons/Flag2.svg' |
import { Flag2 } from 'convert-svg2font/icons' |
 |
Flag3 | 'icons/Flag3.svg' |
import { Flag3 } from 'convert-svg2font/icons' |
 |
Flag4 | 'icons/Flag4.svg' |
import { Flag4 } from 'convert-svg2font/icons' |
 |
Flag | 'icons/Flag.svg' |
import { Flag } from 'convert-svg2font/icons' |
 |
Focus | 'icons/Focus.svg' |
import { Focus } from 'convert-svg2font/icons' |
 |
Folder1 | 'icons/Folder1.svg' |
import { Folder1 } from 'convert-svg2font/icons' |
 |
Folder10 | 'icons/Folder10.svg' |
import { Folder10 } from 'convert-svg2font/icons' |
 |
Folder11 | 'icons/Folder11.svg' |
import { Folder11 } from 'convert-svg2font/icons' |
 |
Folder12 | 'icons/Folder12.svg' |
import { Folder12 } from 'convert-svg2font/icons' |
 |
Folder13 | 'icons/Folder13.svg' |
import { Folder13 } from 'convert-svg2font/icons' |
 |
Folder14 | 'icons/Folder14.svg' |
import { Folder14 } from 'convert-svg2font/icons' |
 |
Folder15 | 'icons/Folder15.svg' |
import { Folder15 } from 'convert-svg2font/icons' |
 |
Folder16 | 'icons/Folder16.svg' |
import { Folder16 } from 'convert-svg2font/icons' |
 |
Folder17 | 'icons/Folder17.svg' |
import { Folder17 } from 'convert-svg2font/icons' |
 |
Folder18 | 'icons/Folder18.svg' |
import { Folder18 } from 'convert-svg2font/icons' |
 |
Folder19 | 'icons/Folder19.svg' |
import { Folder19 } from 'convert-svg2font/icons' |
 |
Folder2 | 'icons/Folder2.svg' |
import { Folder2 } from 'convert-svg2font/icons' |
 |
Folder3 | 'icons/Folder3.svg' |
import { Folder3 } from 'convert-svg2font/icons' |
 |
Folder4 | 'icons/Folder4.svg' |
import { Folder4 } from 'convert-svg2font/icons' |
 |
Folder5 | 'icons/Folder5.svg' |
import { Folder5 } from 'convert-svg2font/icons' |
 |
Folder6 | 'icons/Folder6.svg' |
import { Folder6 } from 'convert-svg2font/icons' |
 |
Folder7 | 'icons/Folder7.svg' |
import { Folder7 } from 'convert-svg2font/icons' |
 |
Folder8 | 'icons/Folder8.svg' |
import { Folder8 } from 'convert-svg2font/icons' |
 |
Folder9 | 'icons/Folder9.svg' |
import { Folder9 } from 'convert-svg2font/icons' |
 |
Folder | 'icons/Folder.svg' |
import { Folder } from 'convert-svg2font/icons' |
 |
Forbidden | 'icons/Forbidden.svg' |
import { Forbidden } from 'convert-svg2font/icons' |
 |
Funnel | 'icons/Funnel.svg' |
import { Funnel } from 'convert-svg2font/icons' |
 |
Garbage1 | 'icons/Garbage1.svg' |
import { Garbage1 } from 'convert-svg2font/icons' |
 |
Garbage2 | 'icons/Garbage2.svg' |
import { Garbage2 } from 'convert-svg2font/icons' |
 |
Garbage | 'icons/Garbage.svg' |
import { Garbage } from 'convert-svg2font/icons' |
 |
Gift | 'icons/Gift.svg' |
import { Gift } from 'convert-svg2font/icons' |
 |
Help | 'icons/Help.svg' |
import { Help } from 'convert-svg2font/icons' |
 |
Hide | 'icons/Hide.svg' |
import { Hide } from 'convert-svg2font/icons' |
 |
Hold | 'icons/Hold.svg' |
import { Hold } from 'convert-svg2font/icons' |
 |
Home1 | 'icons/Home1.svg' |
import { Home1 } from 'convert-svg2font/icons' |
 |
Home2 | 'icons/Home2.svg' |
import { Home2 } from 'convert-svg2font/icons' |
 |
Home | 'icons/Home.svg' |
import { Home } from 'convert-svg2font/icons' |
 |
Hourglass1 | 'icons/Hourglass1.svg' |
import { Hourglass1 } from 'convert-svg2font/icons' |
 |
Hourglass2 | 'icons/Hourglass2.svg' |
import { Hourglass2 } from 'convert-svg2font/icons' |
 |
Hourglass3 | 'icons/Hourglass3.svg' |
import { Hourglass3 } from 'convert-svg2font/icons' |
 |
Hourglass | 'icons/Hourglass.svg' |
import { Hourglass } from 'convert-svg2font/icons' |
 |
House | 'icons/House.svg' |
import { House } from 'convert-svg2font/icons' |
 |
IdCard1 | 'icons/IdCard1.svg' |
import { IdCard1 } from 'convert-svg2font/icons' |
 |
IdCard2 | 'icons/IdCard2.svg' |
import { IdCard2 } from 'convert-svg2font/icons' |
 |
IdCard3 | 'icons/IdCard3.svg' |
import { IdCard3 } from 'convert-svg2font/icons' |
 |
IdCard4 | 'icons/IdCard4.svg' |
import { IdCard4 } from 'convert-svg2font/icons' |
 |
IdCard5 | 'icons/IdCard5.svg' |
import { IdCard5 } from 'convert-svg2font/icons' |
 |
IdCard | 'icons/IdCard.svg' |
import { IdCard } from 'convert-svg2font/icons' |
 |
Idea | 'icons/Idea.svg' |
import { Idea } from 'convert-svg2font/icons' |
 |
Incoming | 'icons/Incoming.svg' |
import { Incoming } from 'convert-svg2font/icons' |
 |
Infinity | 'icons/Infinity.svg' |
import { Infinity } from 'convert-svg2font/icons' |
 |
Info | 'icons/Info.svg' |
import { Info } from 'convert-svg2font/icons' |
 |
Internet | 'icons/Internet.svg' |
import { Internet } from 'convert-svg2font/icons' |
 |
Key | 'icons/Key.svg' |
import { Key } from 'convert-svg2font/icons' |
 |
Lamp | 'icons/Lamp.svg' |
import { Lamp } from 'convert-svg2font/icons' |
 |
Layers1 | 'icons/Layers1.svg' |
import { Layers1 } from 'convert-svg2font/icons' |
 |
Layers | 'icons/Layers.svg' |
import { Layers } from 'convert-svg2font/icons' |
 |
Like1 | 'icons/Like1.svg' |
import { Like1 } from 'convert-svg2font/icons' |
 |
Like2 | 'icons/Like2.svg' |
import { Like2 } from 'convert-svg2font/icons' |
 |
Like | 'icons/Like.svg' |
import { Like } from 'convert-svg2font/icons' |
 |
Link | 'icons/Link.svg' |
import { Link } from 'convert-svg2font/icons' |
 |
List1 | 'icons/List1.svg' |
import { List1 } from 'convert-svg2font/icons' |
 |
List | 'icons/List.svg' |
import { List } from 'convert-svg2font/icons' |
 |
Lock1 | 'icons/Lock1.svg' |
import { Lock1 } from 'convert-svg2font/icons' |
 |
Lock | 'icons/Lock.svg' |
import { Lock } from 'convert-svg2font/icons' |
 |
Locked1 | 'icons/Locked1.svg' |
import { Locked1 } from 'convert-svg2font/icons' |
 |
Locked2 | 'icons/Locked2.svg' |
import { Locked2 } from 'convert-svg2font/icons' |
 |
Locked3 | 'icons/Locked3.svg' |
import { Locked3 } from 'convert-svg2font/icons' |
 |
Locked4 | 'icons/Locked4.svg' |
import { Locked4 } from 'convert-svg2font/icons' |
 |
Locked5 | 'icons/Locked5.svg' |
import { Locked5 } from 'convert-svg2font/icons' |
 |
Locked6 | 'icons/Locked6.svg' |
import { Locked6 } from 'convert-svg2font/icons' |
 |
Locked | 'icons/Locked.svg' |
import { Locked } from 'convert-svg2font/icons' |
 |
Login | 'icons/Login.svg' |
import { Login } from 'convert-svg2font/icons' |
 |
MagicWand | 'icons/MagicWand.svg' |
import { MagicWand } from 'convert-svg2font/icons' |
 |
Magnet1 | 'icons/Magnet1.svg' |
import { Magnet1 } from 'convert-svg2font/icons' |
 |
Magnet2 | 'icons/Magnet2.svg' |
import { Magnet2 } from 'convert-svg2font/icons' |
 |
Magnet | 'icons/Magnet.svg' |
import { Magnet } from 'convert-svg2font/icons' |
 |
Map1 | 'icons/Map1.svg' |
import { Map1 } from 'convert-svg2font/icons' |
 |
Map2 | 'icons/Map2.svg' |
import { Map2 } from 'convert-svg2font/icons' |
 |
MapLocation | 'icons/MapLocation.svg' |
import { MapLocation } from 'convert-svg2font/icons' |
 |
Map | 'icons/Map.svg' |
import { Map } from 'convert-svg2font/icons' |
 |
Megaphone1 | 'icons/Megaphone1.svg' |
import { Megaphone1 } from 'convert-svg2font/icons' |
 |
Megaphone | 'icons/Megaphone.svg' |
import { Megaphone } from 'convert-svg2font/icons' |
 |
Menu1 | 'icons/Menu1.svg' |
import { Menu1 } from 'convert-svg2font/icons' |
 |
Menu2 | 'icons/Menu2.svg' |
import { Menu2 } from 'convert-svg2font/icons' |
 |
Menu3 | 'icons/Menu3.svg' |
import { Menu3 } from 'convert-svg2font/icons' |
 |
Menu4 | 'icons/Menu4.svg' |
import { Menu4 } from 'convert-svg2font/icons' |
 |
Menu | 'icons/Menu.svg' |
import { Menu } from 'convert-svg2font/icons' |
 |
Microphone1 | 'icons/Microphone1.svg' |
import { Microphone1 } from 'convert-svg2font/icons' |
 |
Microphone | 'icons/Microphone.svg' |
import { Microphone } from 'convert-svg2font/icons' |
 |
Minus1 | 'icons/Minus1.svg' |
import { Minus1 } from 'convert-svg2font/icons' |
 |
Minus | 'icons/Minus.svg' |
import { Minus } from 'convert-svg2font/icons' |
 |
More1 | 'icons/More1.svg' |
import { More1 } from 'convert-svg2font/icons' |
 |
More2 | 'icons/More2.svg' |
import { More2 } from 'convert-svg2font/icons' |
 |
More | 'icons/More.svg' |
import { More } from 'convert-svg2font/icons' |
 |
Multiply1 | 'icons/Multiply1.svg' |
import { Multiply1 } from 'convert-svg2font/icons' |
 |
Multiply | 'icons/Multiply.svg' |
import { Multiply } from 'convert-svg2font/icons' |
 |
MusicPlayer1 | 'icons/MusicPlayer1.svg' |
import { MusicPlayer1 } from 'convert-svg2font/icons' |
 |
MusicPlayer2 | 'icons/MusicPlayer2.svg' |
import { MusicPlayer2 } from 'convert-svg2font/icons' |
 |
MusicPlayer3 | 'icons/MusicPlayer3.svg' |
import { MusicPlayer3 } from 'convert-svg2font/icons' |
 |
MusicPlayer | 'icons/MusicPlayer.svg' |
import { MusicPlayer } from 'convert-svg2font/icons' |
 |
Mute | 'icons/Mute.svg' |
import { Mute } from 'convert-svg2font/icons' |
 |
Muted | 'icons/Muted.svg' |
import { Muted } from 'convert-svg2font/icons' |
 |
Navigation1 | 'icons/Navigation1.svg' |
import { Navigation1 } from 'convert-svg2font/icons' |
 |
Navigation | 'icons/Navigation.svg' |
import { Navigation } from 'convert-svg2font/icons' |
 |
Network | 'icons/Network.svg' |
import { Network } from 'convert-svg2font/icons' |
 |
Newspaper | 'icons/Newspaper.svg' |
import { Newspaper } from 'convert-svg2font/icons' |
 |
Next | 'icons/Next.svg' |
import { Next } from 'convert-svg2font/icons' |
 |
Note | 'icons/Note.svg' |
import { Note } from 'convert-svg2font/icons' |
 |
Notebook1 | 'icons/Notebook1.svg' |
import { Notebook1 } from 'convert-svg2font/icons' |
 |
Notebook2 | 'icons/Notebook2.svg' |
import { Notebook2 } from 'convert-svg2font/icons' |
 |
Notebook3 | 'icons/Notebook3.svg' |
import { Notebook3 } from 'convert-svg2font/icons' |
 |
Notebook4 | 'icons/Notebook4.svg' |
import { Notebook4 } from 'convert-svg2font/icons' |
 |
Notebook5 | 'icons/Notebook5.svg' |
import { Notebook5 } from 'convert-svg2font/icons' |
 |
Notebook | 'icons/Notebook.svg' |
import { Notebook } from 'convert-svg2font/icons' |
 |
Notepad1 | 'icons/Notepad1.svg' |
import { Notepad1 } from 'convert-svg2font/icons' |
 |
Notepad2 | 'icons/Notepad2.svg' |
import { Notepad2 } from 'convert-svg2font/icons' |
 |
Notepad | 'icons/Notepad.svg' |
import { Notepad } from 'convert-svg2font/icons' |
 |
Notification | 'icons/Notification.svg' |
import { Notification } from 'convert-svg2font/icons' |
 |
PaperPlane1 | 'icons/PaperPlane1.svg' |
import { PaperPlane1 } from 'convert-svg2font/icons' |
 |
PaperPlane | 'icons/PaperPlane.svg' |
import { PaperPlane } from 'convert-svg2font/icons' |
 |
Pause1 | 'icons/Pause1.svg' |
import { Pause1 } from 'convert-svg2font/icons' |
 |
Pause | 'icons/Pause.svg' |
import { Pause } from 'convert-svg2font/icons' |
 |
Percent1 | 'icons/Percent1.svg' |
import { Percent1 } from 'convert-svg2font/icons' |
 |
Percent | 'icons/Percent.svg' |
import { Percent } from 'convert-svg2font/icons' |
 |
Perspective | 'icons/Perspective.svg' |
import { Perspective } from 'convert-svg2font/icons' |
 |
PhotoCamera1 | 'icons/PhotoCamera1.svg' |
import { PhotoCamera1 } from 'convert-svg2font/icons' |
 |
PhotoCamera | 'icons/PhotoCamera.svg' |
import { PhotoCamera } from 'convert-svg2font/icons' |
 |
Photos | 'icons/Photos.svg' |
import { Photos } from 'convert-svg2font/icons' |
 |
Picture1 | 'icons/Picture1.svg' |
import { Picture1 } from 'convert-svg2font/icons' |
 |
Picture2 | 'icons/Picture2.svg' |
import { Picture2 } from 'convert-svg2font/icons' |
 |
Picture | 'icons/Picture.svg' |
import { Picture } from 'convert-svg2font/icons' |
 |
Pin | 'icons/Pin.svg' |
import { Pin } from 'convert-svg2font/icons' |
 |
Placeholder1 | 'icons/Placeholder1.svg' |
import { Placeholder1 } from 'convert-svg2font/icons' |
 |
Placeholder2 | 'icons/Placeholder2.svg' |
import { Placeholder2 } from 'convert-svg2font/icons' |
 |
Placeholder3 | 'icons/Placeholder3.svg' |
import { Placeholder3 } from 'convert-svg2font/icons' |
 |
Placeholder | 'icons/Placeholder.svg' |
import { Placeholder } from 'convert-svg2font/icons' |
 |
Placeholders | 'icons/Placeholders.svg' |
import { Placeholders } from 'convert-svg2font/icons' |
 |
PlayButton1 | 'icons/PlayButton1.svg' |
import { PlayButton1 } from 'convert-svg2font/icons' |
 |
PlayButton | 'icons/PlayButton.svg' |
import { PlayButton } from 'convert-svg2font/icons' |
 |
Plus | 'icons/Plus.svg' |
import { Plus } from 'convert-svg2font/icons' |
 |
Power | 'icons/Power.svg' |
import { Power } from 'convert-svg2font/icons' |
 |
Previous | 'icons/Previous.svg' |
import { Previous } from 'convert-svg2font/icons' |
 |
PriceTag | 'icons/PriceTag.svg' |
import { PriceTag } from 'convert-svg2font/icons' |
 |
'icons/Print.svg' |
import { Print } from 'convert-svg2font/icons' |
|
 |
PushPin | 'icons/PushPin.svg' |
import { PushPin } from 'convert-svg2font/icons' |
 |
Radar | 'icons/Radar.svg' |
import { Radar } from 'convert-svg2font/icons' |
 |
Reading | 'icons/Reading.svg' |
import { Reading } from 'convert-svg2font/icons' |
 |
Record | 'icons/Record.svg' |
import { Record } from 'convert-svg2font/icons' |
 |
Repeat1 | 'icons/Repeat1.svg' |
import { Repeat1 } from 'convert-svg2font/icons' |
 |
Repeat | 'icons/Repeat.svg' |
import { Repeat } from 'convert-svg2font/icons' |
 |
Restart | 'icons/Restart.svg' |
import { Restart } from 'convert-svg2font/icons' |
 |
Resume | 'icons/Resume.svg' |
import { Resume } from 'convert-svg2font/icons' |
 |
Rewind1 | 'icons/Rewind1.svg' |
import { Rewind1 } from 'convert-svg2font/icons' |
 |
Rewind | 'icons/Rewind.svg' |
import { Rewind } from 'convert-svg2font/icons' |
 |
Route | 'icons/Route.svg' |
import { Route } from 'convert-svg2font/icons' |
 |
Save | 'icons/Save.svg' |
import { Save } from 'convert-svg2font/icons' |
 |
Search1 | 'icons/Search1.svg' |
import { Search1 } from 'convert-svg2font/icons' |
 |
Search | 'icons/Search.svg' |
import { Search } from 'convert-svg2font/icons' |
 |
Send | 'icons/Send.svg' |
import { Send } from 'convert-svg2font/icons' |
 |
Server1 | 'icons/Server1.svg' |
import { Server1 } from 'convert-svg2font/icons' |
 |
Server2 | 'icons/Server2.svg' |
import { Server2 } from 'convert-svg2font/icons' |
 |
Server3 | 'icons/Server3.svg' |
import { Server3 } from 'convert-svg2font/icons' |
 |
Server | 'icons/Server.svg' |
import { Server } from 'convert-svg2font/icons' |
 |
Settings1 | 'icons/Settings1.svg' |
import { Settings1 } from 'convert-svg2font/icons' |
 |
Settings2 | 'icons/Settings2.svg' |
import { Settings2 } from 'convert-svg2font/icons' |
 |
Settings3 | 'icons/Settings3.svg' |
import { Settings3 } from 'convert-svg2font/icons' |
 |
Settings4 | 'icons/Settings4.svg' |
import { Settings4 } from 'convert-svg2font/icons' |
 |
Settings5 | 'icons/Settings5.svg' |
import { Settings5 } from 'convert-svg2font/icons' |
 |
Settings6 | 'icons/Settings6.svg' |
import { Settings6 } from 'convert-svg2font/icons' |
 |
Settings7 | 'icons/Settings7.svg' |
import { Settings7 } from 'convert-svg2font/icons' |
 |
Settings8 | 'icons/Settings8.svg' |
import { Settings8 } from 'convert-svg2font/icons' |
 |
Settings9 | 'icons/Settings9.svg' |
import { Settings9 } from 'convert-svg2font/icons' |
 |
Settings | 'icons/Settings.svg' |
import { Settings } from 'convert-svg2font/icons' |
 |
Share1 | 'icons/Share1.svg' |
import { Share1 } from 'convert-svg2font/icons' |
 |
Share2 | 'icons/Share2.svg' |
import { Share2 } from 'convert-svg2font/icons' |
 |
Share | 'icons/Share.svg' |
import { Share } from 'convert-svg2font/icons' |
 |
Shuffle1 | 'icons/Shuffle1.svg' |
import { Shuffle1 } from 'convert-svg2font/icons' |
 |
Shuffle | 'icons/Shuffle.svg' |
import { Shuffle } from 'convert-svg2font/icons' |
 |
Shutdown | 'icons/Shutdown.svg' |
import { Shutdown } from 'convert-svg2font/icons' |
 |
Sign1 | 'icons/Sign1.svg' |
import { Sign1 } from 'convert-svg2font/icons' |
 |
Sign | 'icons/Sign.svg' |
import { Sign } from 'convert-svg2font/icons' |
 |
Skip | 'icons/Skip.svg' |
import { Skip } from 'convert-svg2font/icons' |
 |
Smartphone1 | 'icons/Smartphone1.svg' |
import { Smartphone1 } from 'convert-svg2font/icons' |
 |
Smartphone10 | 'icons/Smartphone10.svg' |
import { Smartphone10 } from 'convert-svg2font/icons' |
 |
Smartphone11 | 'icons/Smartphone11.svg' |
import { Smartphone11 } from 'convert-svg2font/icons' |
 |
Smartphone2 | 'icons/Smartphone2.svg' |
import { Smartphone2 } from 'convert-svg2font/icons' |
 |
Smartphone3 | 'icons/Smartphone3.svg' |
import { Smartphone3 } from 'convert-svg2font/icons' |
 |
Smartphone4 | 'icons/Smartphone4.svg' |
import { Smartphone4 } from 'convert-svg2font/icons' |
 |
Smartphone5 | 'icons/Smartphone5.svg' |
import { Smartphone5 } from 'convert-svg2font/icons' |
 |
Smartphone6 | 'icons/Smartphone6.svg' |
import { Smartphone6 } from 'convert-svg2font/icons' |
 |
Smartphone7 | 'icons/Smartphone7.svg' |
import { Smartphone7 } from 'convert-svg2font/icons' |
 |
Smartphone8 | 'icons/Smartphone8.svg' |
import { Smartphone8 } from 'convert-svg2font/icons' |
 |
Smartphone9 | 'icons/Smartphone9.svg' |
import { Smartphone9 } from 'convert-svg2font/icons' |
 |
Smartphone | 'icons/Smartphone.svg' |
import { Smartphone } from 'convert-svg2font/icons' |
 |
Speaker1 | 'icons/Speaker1.svg' |
import { Speaker1 } from 'convert-svg2font/icons' |
 |
Speaker2 | 'icons/Speaker2.svg' |
import { Speaker2 } from 'convert-svg2font/icons' |
 |
Speaker3 | 'icons/Speaker3.svg' |
import { Speaker3 } from 'convert-svg2font/icons' |
 |
Speaker4 | 'icons/Speaker4.svg' |
import { Speaker4 } from 'convert-svg2font/icons' |
 |
Speaker5 | 'icons/Speaker5.svg' |
import { Speaker5 } from 'convert-svg2font/icons' |
 |
Speaker6 | 'icons/Speaker6.svg' |
import { Speaker6 } from 'convert-svg2font/icons' |
 |
Speaker7 | 'icons/Speaker7.svg' |
import { Speaker7 } from 'convert-svg2font/icons' |
 |
Speaker8 | 'icons/Speaker8.svg' |
import { Speaker8 } from 'convert-svg2font/icons' |
 |
Speaker | 'icons/Speaker.svg' |
import { Speaker } from 'convert-svg2font/icons' |
 |
Spotlight | 'icons/Spotlight.svg' |
import { Spotlight } from 'convert-svg2font/icons' |
 |
Star1 | 'icons/Star1.svg' |
import { Star1 } from 'convert-svg2font/icons' |
 |
Star | 'icons/Star.svg' |
import { Star } from 'convert-svg2font/icons' |
 |
Stop1 | 'icons/Stop1.svg' |
import { Stop1 } from 'convert-svg2font/icons' |
 |
Stop | 'icons/Stop.svg' |
import { Stop } from 'convert-svg2font/icons' |
 |
Stopwatch1 | 'icons/Stopwatch1.svg' |
import { Stopwatch1 } from 'convert-svg2font/icons' |
 |
Stopwatch2 | 'icons/Stopwatch2.svg' |
import { Stopwatch2 } from 'convert-svg2font/icons' |
 |
Stopwatch3 | 'icons/Stopwatch3.svg' |
import { Stopwatch3 } from 'convert-svg2font/icons' |
 |
Stopwatch4 | 'icons/Stopwatch4.svg' |
import { Stopwatch4 } from 'convert-svg2font/icons' |
 |
Stopwatch | 'icons/Stopwatch.svg' |
import { Stopwatch } from 'convert-svg2font/icons' |
 |
Street1 | 'icons/Street1.svg' |
import { Street1 } from 'convert-svg2font/icons' |
 |
Street | 'icons/Street.svg' |
import { Street } from 'convert-svg2font/icons' |
 |
Substract1 | 'icons/Substract1.svg' |
import { Substract1 } from 'convert-svg2font/icons' |
 |
Substract | 'icons/Substract.svg' |
import { Substract } from 'convert-svg2font/icons' |
 |
Success | 'icons/Success.svg' |
import { Success } from 'convert-svg2font/icons' |
 |
Switch1 | 'icons/Switch1.svg' |
import { Switch1 } from 'convert-svg2font/icons' |
 |
Switch2 | 'icons/Switch2.svg' |
import { Switch2 } from 'convert-svg2font/icons' |
 |
Switch3 | 'icons/Switch3.svg' |
import { Switch3 } from 'convert-svg2font/icons' |
 |
Switch4 | 'icons/Switch4.svg' |
import { Switch4 } from 'convert-svg2font/icons' |
 |
Switch5 | 'icons/Switch5.svg' |
import { Switch5 } from 'convert-svg2font/icons' |
 |
Switch6 | 'icons/Switch6.svg' |
import { Switch6 } from 'convert-svg2font/icons' |
 |
Switch7 | 'icons/Switch7.svg' |
import { Switch7 } from 'convert-svg2font/icons' |
 |
Switch | 'icons/Switch.svg' |
import { Switch } from 'convert-svg2font/icons' |
 |
Tabs1 | 'icons/Tabs1.svg' |
import { Tabs1 } from 'convert-svg2font/icons' |
 |
Tabs | 'icons/Tabs.svg' |
import { Tabs } from 'convert-svg2font/icons' |
 |
Target | 'icons/Target.svg' |
import { Target } from 'convert-svg2font/icons' |
 |
Television1 | 'icons/Television1.svg' |
import { Television1 } from 'convert-svg2font/icons' |
 |
Television | 'icons/Television.svg' |
import { Television } from 'convert-svg2font/icons' |
 |
Time | 'icons/Time.svg' |
import { Time } from 'convert-svg2font/icons' |
 |
Trash | 'icons/Trash.svg' |
import { Trash } from 'convert-svg2font/icons' |
 |
Umbrella | 'icons/Umbrella.svg' |
import { Umbrella } from 'convert-svg2font/icons' |
 |
Unlink | 'icons/Unlink.svg' |
import { Unlink } from 'convert-svg2font/icons' |
 |
Unlocked1 | 'icons/Unlocked1.svg' |
import { Unlocked1 } from 'convert-svg2font/icons' |
 |
Unlocked2 | 'icons/Unlocked2.svg' |
import { Unlocked2 } from 'convert-svg2font/icons' |
 |
Unlocked | 'icons/Unlocked.svg' |
import { Unlocked } from 'convert-svg2font/icons' |
 |
Upload | 'icons/Upload.svg' |
import { Upload } from 'convert-svg2font/icons' |
 |
User1 | 'icons/User1.svg' |
import { User1 } from 'convert-svg2font/icons' |
 |
User2 | 'icons/User2.svg' |
import { User2 } from 'convert-svg2font/icons' |
 |
User3 | 'icons/User3.svg' |
import { User3 } from 'convert-svg2font/icons' |
 |
User4 | 'icons/User4.svg' |
import { User4 } from 'convert-svg2font/icons' |
 |
User5 | 'icons/User5.svg' |
import { User5 } from 'convert-svg2font/icons' |
 |
User6 | 'icons/User6.svg' |
import { User6 } from 'convert-svg2font/icons' |
 |
User7 | 'icons/User7.svg' |
import { User7 } from 'convert-svg2font/icons' |
 |
User | 'icons/User.svg' |
import { User } from 'convert-svg2font/icons' |
 |
Users1 | 'icons/Users1.svg' |
import { Users1 } from 'convert-svg2font/icons' |
 |
Users | 'icons/Users.svg' |
import { Users } from 'convert-svg2font/icons' |
 |
VideoCamera1 | 'icons/VideoCamera1.svg' |
import { VideoCamera1 } from 'convert-svg2font/icons' |
 |
VideoCamera | 'icons/VideoCamera.svg' |
import { VideoCamera } from 'convert-svg2font/icons' |
 |
VideoPlayer1 | 'icons/VideoPlayer1.svg' |
import { VideoPlayer1 } from 'convert-svg2font/icons' |
 |
VideoPlayer2 | 'icons/VideoPlayer2.svg' |
import { VideoPlayer2 } from 'convert-svg2font/icons' |
 |
VideoPlayer | 'icons/VideoPlayer.svg' |
import { VideoPlayer } from 'convert-svg2font/icons' |
 |
View1 | 'icons/View1.svg' |
import { View1 } from 'convert-svg2font/icons' |
 |
View2 | 'icons/View2.svg' |
import { View2 } from 'convert-svg2font/icons' |
 |
View | 'icons/View.svg' |
import { View } from 'convert-svg2font/icons' |
 |
VolumeControl1 | 'icons/VolumeControl1.svg' |
import { VolumeControl1 } from 'convert-svg2font/icons' |
 |
VolumeControl | 'icons/VolumeControl.svg' |
import { VolumeControl } from 'convert-svg2font/icons' |
 |
Warning | 'icons/Warning.svg' |
import { Warning } from 'convert-svg2font/icons' |
 |
Wifi1 | 'icons/Wifi1.svg' |
import { Wifi1 } from 'convert-svg2font/icons' |
 |
Wifi | 'icons/Wifi.svg' |
import { Wifi } from 'convert-svg2font/icons' |
 |
Windows1 | 'icons/Windows1.svg' |
import { Windows1 } from 'convert-svg2font/icons' |
 |
Windows2 | 'icons/Windows2.svg' |
import { Windows2 } from 'convert-svg2font/icons' |
 |
Windows3 | 'icons/Windows3.svg' |
import { Windows3 } from 'convert-svg2font/icons' |
 |
Windows4 | 'icons/Windows4.svg' |
import { Windows4 } from 'convert-svg2font/icons' |
 |
Windows | 'icons/Windows.svg' |
import { Windows } from 'convert-svg2font/icons' |
 |
WirelessInternet | 'icons/WirelessInternet.svg' |
import { WirelessInternet } from 'convert-svg2font/icons' |
 |
Worldwide1 | 'icons/Worldwide1.svg' |
import { Worldwide1 } from 'convert-svg2font/icons' |
 |
Worldwide | 'icons/Worldwide.svg' |
import { Worldwide } from 'convert-svg2font/icons' |
 |
ZoomIn | 'icons/ZoomIn.svg' |
import { ZoomIn } from 'convert-svg2font/icons' |
 |
ZoomOut | 'icons/ZoomOut.svg' |
import { ZoomOut } from 'convert-svg2font/icons' |
Optimize!
Please use SVGO on your files before commit: https://jakearchibald.github.io/svgomg/
Icons made by Smashicons from www.flaticon.com