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

@imikailoby/mariflag

v2.1.1

Published

Versatile SVG Generator for Custom Icon Sequences. Inspired by International Maritime Signal Flags

Downloads

7

Readme

@imikailoby/mariflag

Mariflag is a versatile SVG generator that converts text sequences into a series of icons. While originally inspired by maritime signal flags, this package also allows you to provide your own custom SVG icons for each letter, enabling you to encode text into various visual forms, limited only by your imagination (and the available SVG icons of course).

For example, you can create visualizations inspired by semaphore signals, encode text into designs similar to Morse code or Braille, and more.

example

Installation

# via yarn
yarn add @imikailoby/mariflag

# via npm
npm install @imikailoby/mariflag

Usage

  1. Import the generateSvg function into your project.
  2. Provide the necessary string input (only A-Z characters are supported) and configuration (optional).
  3. ... and you're done!

Example:

import { generateSvg } from '@imikailoby/mariflag'; // Import the main function

const helloSvg = generateSvg('Hello'); // Provide the required text

// ... Use the generated SVG as needed.

Configuration

Provide a custom configuration as a second argument to override the default parameters. Example:

generateSvg("string", {
    orientation: "horizontal",
    offset: 16,
    customIcons: {
      M: '<svg width="60" height="120">...</svg>'
    }
    ...
  });

Supported parameters:

| Parameter | Values | Default | Description | | ---------------------- | -------------------------------------- | ---------------- | -------------------------------- | | orientation (string) | 'horizontal'|'vertical' | 'horizontal' | Specifies the flag's orientation | | offset (number) | non-negative integers (including zero) | 16 | Specifies the offset in pixels | | customIcons (object) | *Check description below | N/A | Provide custom icons per letter |

Custom icons

You can provide the custom icons associated with each letter according to your preferences. To do this, pass a customIcons object in the configuration, where each key is a letter from A-Z and the corresponding value is an SVG string. You can replace all default icons or just specific letters.

Custom icon requirements

The SVG must include both width and height attributes with values greater than 0. These dimensions are used to calculate the overall size of the output SVG, as well as the spacing between icons, etc. If any of these attributes are missing or have invalid values, the default icon for that letter will be used instead.

Example:

{
  A: '<svg width="60" height="120">...</svg>', // valid custom icon
  B: '<svg width="60">...</svg>', // invalid (no height)
  C: '<svg>...</svg>', // invalid (no width and height)
  D: '<svg width="60" height="0">...</svg>', // invalid (height is 0)
  ...
}

You can view examples of the default icons here.