@gurupras/svg-file-icons

    0.0.5 • Public • Published

    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

    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 binary-file icon 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.

    Install

    npm i @gurupras/svg-file-icons

    DownloadsWeekly Downloads

    1

    Version

    0.0.5

    License

    MIT

    Unpacked Size

    1.74 MB

    Total Files

    1777

    Last publish

    Collaborators

    • gurupras