@imikailoby/mariflag
v2.1.1
Published
Versatile SVG Generator for Custom Icon Sequences. Inspired by International Maritime Signal Flags
Downloads
4
Maintainers
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.
Installation
# via yarn
yarn add @imikailoby/mariflag
# via npm
npm install @imikailoby/mariflag
Usage
- Import the
generateSvg
function into your project. - Provide the necessary string input (only A-Z characters are supported) and configuration (optional).
- ... 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.