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

svgasset

v0.1.0-rc.3

Published

Client side inline SVG library and backend building tool

Downloads

5

Readme

svgAsset

A simple library for inserting inline SVG into DOM. Comes with the builder!

Client side

Include browser/svgasset.svg somewhere in the page. svgAsset function appears in the global scope.

Client side API

Calling svgAsset() return a SVG DOM element that can be used in any way you want.

The signature is SVGAsset(/* str */ assetName, /* optional object or str */ attrs).

  • assetName is a name of the SVG asset;

  • attrs (optional) is a dictionary of attributes to set to element. If it's a string in format "width x height", it's the same as providing {"width": ..., "height": ...}.

But first you have to declare the assets themselves. It is done with svgAsset.register(/* object */ assets)

  • assets is a dictionary. Keys are asset names and values are corresponding HTML (SVG) strings.

Builder

Sure, creating and maintaining assets dictionary by hands is close to impossible. But you don't need to do it manually, there's a builder for that.

Builder as a module

Builder can be used in Node.js as a module. The require result is a function with following signature:

require('svgasset')(/* array of str */ filenames, /* optional object */ options)

  • filenames are filenames of SVG files to be included into dictionary. No magic wildcards are used here. Relative filenames will be resolved from currect directory (process.cwd(), not __dirname!).

  • options.writeBefore (optional) is a string or Buffer to be written before the dictionary.

  • options.writeAfter (optional) is similar to writeBefore.

Return value

Function returns ReadableStream that can be piped to any file descriptor or stdout/stderr.

In addition to all Stream interface there's some events emitted:

  • error when something bad is happened. All errors are recoverable and even if you have zillion of errors, output stream still would contain valid javascript (if errors were handled and didn't abort Node process).

  • progress reports filename being processed now. Useful for CLI application.

Builder as CLI application

If installed globally, this module can be called via command line interface.

svgasset-build [-o <output filename>] [-v] <filename> [, <filename>, ...]

  • -o or --output defines where output dictionary would be placed. Default is stdout.

  • -v or --verbose tells application to report what file is being processed right now. Reports end errors are written to stderr, not touching the stdout.

  • filenames are filenames. Detailed expaination is below.

Masks and includes

First of all, relative filenames are resolved from current directory.

Wildcards are supported (glob node module is used). So, svgasset-build my-app/images/**/*.svg is a perfectly valid input.

If a filename specified starts with @, it is considered to be a list: a text file containing filenames one per line. Anything between # and the end of the line is a comment.

List file even can inlude other list files, start them with @ char. Wildcards are also supported. Relative filenames in list files are resolved form the directory where list file is (like in CSS includes).

Example 1

I want to build all the SVGs in current directory and anything listed in prod-svgs.txt in the parent dir, and place output into svgs.js.

svgasset-build *.svg @../prod-svgs.txt -o svgs.js

Example 2

I want to do the same keeping my command line as simple as possible.

svgasset-build  @prod.txt -o svgs.js
# prod.txt

# Include all the SVGs
*.svg

# Include another file
@../prod-svgs.txt

Example 3

I want to process file in current directory, its name starts with @, but it's not the list.

svgasset-build  ./@icon.svg -o svgs.js

Using CLI without installation

If you dont want to install svgasset-build globally, it can be called directly:

node <path-to-module>/bin/cli