npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@whykhamist/file-icons

v1.0.2

Published

A custom font featuring icons for several types of files. This package uses the Vivid icons from [file-icons-vector](https://github.com/dmhendricks/file-icon-vectors)

Downloads

1

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

whykhamistwhykhamist

Keywords

Readme

File-Icons

A custom font featuring icons for several types of files. This package uses the Vivid icons from file-icons-vector

Installation

$ npm i @whykhamist/file-icons

Demo

Basic Use

import "@whykhamist/file-icons/style.css";

<span class="fi fi-pdf">
  <span class="path1"></span>
  <span class="path2"></span>
  <span class="path3"></span>
  <span class="path4"></span>
</span>;

Why the child elements?

  • The SVG files have more than one color, since font glyphs can only have one color, it is necessary to use multiple paths for multicolor icons.

How do I know how many paths the icon need?

  • The package exports a "catalog" object that contains the number of paths for each icon.
import { catalog } from "@whykhamist/file-icons";

console.log(catalog["pdf"]); // 4

Is there a quicker way to use the icons?

  • Yes, the package also exports a "setPaths" function. You can use it to set the number of paths for each icon. By default it will search elements with the class fi and automatically set the number of paths based on the icon name.
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>File Icons</title>
  </head>
  <body>
    <div id="app">
      <span class="fi fi-pdf" style="font-size: 75pt"></span>
      <span class="fi fi-mp3" style="font-size: 75pt"></span>
      <span class="fi fi-cmd" style="font-size: 75pt"></span>
    </div>
    <script type="module">
      import "@whykhamist/file-icons/style.css";

      //Just call the setPaths function after the DOM is ready
      import { setPaths } from "@whykhamist/file-icons";

      window.addEventListener("DOMContentLoaded", setPaths());
    </script>
  </body>
</html>

Vue Component

The package exports a vue component that you can use.

<script setup lang="ts" >
    import { VueComponent as FileIcon } from "@whykhamist/file-icons";
</script>

<template>
    <FileIcon name="pdf" class="..."></FileIcon>
</template>

API Reference

Objects

catalog : ICatalog

Contains the list of icon names with their number of paths.

Methods

setPaths(src, options) : void

This function adds the necessary number of paths to the icon rendering element. (Uses the appendChildPath & clearChildPaths functions)

  • Parameters

    • src

      Type: string | HTMLELement

      Default: fi

      The element that you want to set the number of paths for. If you pass a string, it will search for the element with that class name. You can also pass an HTMLElement.

    • options

      Type: IOptions

      Default: { tag: "span", classPrefix: "path" }

appendChildPath(el, pathCtr, tag, classPrefix) : void

This function adds the necessary number of paths to the icon rendering element.

  • Parameters

    • el

      Type: HTMLElement

      Required: true

      The element to append child paths to

    • pathCtr

      Type: number

      Required: true

      The number of paths to append

    • tag

      Type: string

      Default: span

      The element tag to use for the paths

    • classPrefix

      Type: string

      Default: 'path'

clearChildPaths(el) : void

Clear child paths from the provided element.

  • Parameters

    • el

      Type: HTMLElemen

      Required: true

      The element to clear child paths from

Type Declaration

export type ICatalog = Record<string, number>;

export type IOptions = {
  /**
   * Element tag to use for the paths
   * @default span
   */
  tag?: string,

  /**
   * Class prefix to use for the path's classname
   * (use only if you have custom css styling)
   * @default path
   */
  classPrefix?: string,
};