@talenra/icons NPM

talenra Icons

Icons for talenra apps.

Installation

Add the @talenra registry and the default registry in your .npmrc.

registry=https://registry.npmjs.com

Install the package.

npm i @talenra/icons

Add the stylesheet

Make sure the stylesheet is available in your app. Depending on your setup you might want to link the stylesheet in your app's head…

<head>
    <!-- Other HTML head elements -->
    <link href="styles/talenra-icons.css" rel="stylesheet">
</head>

… or @use it in your SCSS setup.

@use "~@talenra/icons/dist/css/talenra-icons";

Apply the `talenra-icon` classes

Add a HTML element (typically span or i) and assign the base class talenra-icon plus the modifier class used for the icon you need to display (e.g. talenra-icon--add for the "add" icon).

<body>
    <i class="talenra-icon talenra-icon--add"></i>
</body>

Using two-colors icon (duplex)

Follow the steps above and add the extra class talenra-icon-duplex. Note that duplex icons use the suffix -duplex in their modifier class name.

    <i class="talenra-icon talenra-icon-duplex talenra-icon--person-checkmark-duplex"></i>

You can set the colors globally for all duplex icons…

.talenra-icon-duplex {
  --color-primary: #000;
  --color-secondary: #999;
}

… or individually per icon using the style attribute.

    <i 
        class="talenra-icon talenra-icon-duplex talenra-icon--person-checkmark-duplex"
        style="--color-primary: #000; --color-secondary: #999;"
    ></i>

Designing Icons

Use the template /templates/talenra_icon_tmpl_24pt.ai.

Make sure to stick with Material's Design Principles.

Include a transparent square for positioning (x: 0, y: 0: w: 24pt, h: 24pt) and put it behind the icon.

Add a new icon

Adding a single-color icon

Glyphs: Add a new glyph (+ Icon bottom left).

Glyphs: Change its name to match the private space (uniE000 – uniF8FF) and press enter.

Note: If your duplicating an existing Material icon, make sure to use the same Unicode value as in Material. You'll find the value on the Material Icons Site. Search for the icon name and click the icon. The Unicode value is displayed as "Code point" in the sidebar.
If your adding a custom icon, use the Unicode space starting with uniF000.

Glyphs: Change the name to talenra-<icon-name> (the Unicode value will be kept).

Copy the vector graphic (svg) to /src/icons/<icon-name>-24px.svg.

Illustrator: Open the graphic and copy the contents with the bounding box.

Glyphs: Double-click the new glyph and paste the graphic.

Glyphs: Set the width and height of the graphic to 960, x position to 0, y position to -120 and the glyph width to 960.

Glyphs: Double-click the bounding box and delete it.

Glyphs: Select all ⌘A
Glyphs: Glyph → Add Extremes
Glyphs: Glyph → Correct Path Direction ⇧⌘R
Glyphs: Glyph → Tidy up Paths ⌥⇧⌘T

Adding a two-colors icon (duplex)

Follow the steps as explained in «Adding a single-color icon but…

Use the unicode range starting at F800.
Create one glyph for the primary color and a second glyph for the secondary color.
In the unicode space, the second glyph shall be the direct sibling of the first glyph (e.g. F800 and F801).
Use the same name as used for the single-color icon and add the suffixes -d1 for the primary color glyph and -d2 for the secondary color glyph.

Todo

Find unused Unicode values to be used for custom icons. Until we know the used ranges, we just use the space starting with uniF000. This space is not used by Material yet.

Ressources

Contributing

Contributions welcome. Please submit a pull request.

Versioning

We use Semantic Versioning (semver).

Note: The font files have their own versioning format (e.g. 1.000) which does not support semver. For now we just ignore the font file version.

Please refer to the Changelog for a complete version history.

License

This project is licensed under the ISC License - see the LICENSE.md file for details.

Contact

icon design ui css

@infinitebrahmanuniverse/nolb-_tal @everything-registry/sub-chunk-893 @zalastax/nolb-_tal

3.6.0

2 years ago