svg-file-icons

File icons for your next JS project

Demo

What is it?

svg-file-icons takes all the icons you know and love and makes them available through a simple API

Currently, it supports icons from

• FontAwesome
• Octicons
• Devicons
• Mfizz
• Atom

You can import just the icons you need for your project from any of the aforementioned sources The library also includes Atom's icon database for quick lookups and colours !

Getting Started

Installation

npm install @gurupras/svg-file-icons

Usage

Once installed, you can then use it in your code as follows:

import FileIcons  from '@gurupras/svg-file-icons'

const fileIcons = new FileIcons()
const icon = await fileIcons.getFileIcon('index.html')
console.log(icon)
{
  code: "f31b",
  colour: "#d28445",
  font: "font-awesome",
  path: "M1130 597l16-..."
  ref: "html5",
  viewBox: "0 0 1408 1792"
}

To create the SVG element:

const svg = document.createElement('svg')
svg.setAttribute('viewBox', icon.viewBox)
svg.innerHTML = `<path d="${icon.path}"/>`
body.appendChild(svg)

Rules

Icon types are actually matched by Regular Expression rules defined in Atom's icon database. While these rules cover common use-cases, you may encounter that they miss out on a few.

For example, if you were to request an icon for file a.out, you would end up with the default icon. However, we can do better by adding a new rule that returns the icon we want. In the following example, we will create a new rule that returns Octicons' file-binary icon which seems appropriate for this file-type.

/**
 * The rule format is:
 * rule = [
 *   match-rule,
 *   font-family,
 *   icon-name,
 *   priority (high value to override),
 *   colour (if any)
 * ]
 */
const ruleIndex = fileIcons.addRule([
  /.*\.out$/, // match-rule: Any file ending with '.out',
  'octicons', // font-family
  'file-binary', // icon-name
  999, // priority
  '#000' // colour: black
])

With this in place, we can now expect to receive our new icon every time a request is made for a .out file.

The above rule can be removed by running

fileIcons.removeRule(ruleIndex)

Caveats

Colours

Other than the obvious fact that this library uses the UK spelling, currently, there is no easy way to change the colours. The colours are obtained from atom's icon database and baked into the library.

Icon Sizes

The sizes of icons don't all match. Atom's stylesheet has specialized handling of several icons which isn't handled by the library. This is in the pipeline however, and should be fixed soon.