Icons#

The icons are loaded as a font when the https://tinka.com/assets/fonts/tinka-fonts.css file is included on the page. This is usually done for you when you use @tinka/tailwindcss or the plain outputs.

Just like FontAwesome, the way to use the icons is also adding .icon class to the element.

But unlike FontAwesome, we use Ligature instead of additional CSS and classes.

The barebone implementation of an icon will be:

<span class="icon">[name-of-the-icon-here]</span>

It does not have to be a span, you can also opt for i to make it more FontAwesome-like!

To make the usage of icon accessible to screen reader users, please always consider doing the following:

This will let the users know that these are basically images, not text. This will make reading the content easier for people using screen readers.

If you use icons as just purely visual decorations, add aria-hidden to help screen readers ignore them.

If you use icons to express a certain emotion, or to make a message more complete, adding aria-label to the tag will let your complete message be heard by more people.

A nice label message is not always easy to write or obtain in languages. We don't want people to leave this blank, thus it is okay to write them in English. In this page you can also find example aria-labels below at List of All Icons section.

• Semantically identifying a font icon with role="img"
• How FontAwesome approaches Accessibility

Very easy – just add other Tailwind CSS utility classes.

Since you are already using the fun part of the design system, circle-alert please feel free to be creative and experiment! Let go visual consistency and don't feel like you have to listen to the design team. circle-hourglass

<i
  role="img"
  className="icon animate-bounce text-green-500"
  aria-label="(a bouncing smilely face)"
>
  smileface
</i>
 
<i
  role="img"
  aria-label="(a pinging alert sign)"
  className="icon animate-ping text-red-400"
>
  circlealert
</i>
 
<i
  role="img"
  aria-label="(a spinning hourglass)"
  className="icon animate-spin text-blue-600"
>
  circlehourglass
</i>

<div className="text-center">
  <i
    role="img"
    className="icon text-9xl text-red-400 mt-2"
    aria-label="Attention!"
    >circlealert</i
  >
  <br />
  <em className="font-bold not-italic text-input-invalid-text"
    >a cool error message!</em
  >
</div>

A word containing symbols like dash (-) will trigger different layout behaviour on Safari on both macOS and iOS. It is rendered as if the word has no width.

Thus our icon names only contain a~z until further notice.

This feature is not ready yet. At the moment the SVGs won't be responsive, nor taking up fill colour from their context. But this will be how you can use them.

npm i "@tinka/icons"

and then

import svgPerson from "@tinka/icons/src/assets/person.svg";

The build script is here: https://github.com/TinkaTech/tinka-ui/blob/main/packages/icons/build.ts

Summary of the build process:

1. In Figma, make sure all paths are with the correct non-zero fill rule. even-odd is useful, but cannot be automatically converted to non-zero.
2. I manually download the icons from Figma and put it under src/assets folder.
3. The script searches through the src/assets folder. Create all lowercase, kebab case names for each SVG file it has found. Folder name will be part of the icon name.
4. The script uses svgicons2svgfont package to create a SVG font definition. Each glyph will have a unicdoe attribute, which is just the name.
5. svg2ttf package will then convert the SVG font (.svg) into a TrueType font (.ttf), and then the other popular formats.