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-svg2font

SVG -> 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-fonts

According 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](https://githu