The personal site of Erik Weilow
overview

ikon

Icon creation for web apps

What started out as a lack of properly adjustable icons ended up as a React/JSX-based icon creation framework, which generates all the icons a modern web app requires. This is done by letting icons be responsive to their intended size and styled using CSS.

GitHub repository

Development mode demo

Details

Ikon is a React-based icon generator for modern web apps which generates icons by screenshotting them with Puppeteer.

Why create icons with React?

React is used by many to create web applications, so it's natural to extend the same knowledge to icon creation.

The idea behind this is that the icon can be considered a normal component, which can be styled according to different dimensions. In practical use one might want a different style of icon for smaller favicons (16px-64px sizes), while doing nice scaling for app icons and finally applying entirely different styles when generating launch screens (that may include text).

This just falls out natural when working with web technologies, which must be made responsive in order to properly work on all sorts of screens.

In development, we can access a fully fledged website that lets one preview all the icons:

How does it work?

The user of Ikon simply creates a TypeScript file in their project, which could look like this (while this example merely creates icons that write out dimensions and their pixel ratios, only imagination is the limit):

import React from "react";
import { IconGenerationComponent } from "@eweilow/ikon-cli";

const Component: IconGenerationComponent = props => (
  <div
    style={{
      background: "white",
      color: "red",
      fontWeight: "bold",
      height: "100%",
      width: "100%"
    }}
  >
    {props.name}: {props.width}x{props.height}@{(props.pixelRatio * 100).toFixed(0)}%
  </div>
);

export default Component;

When running Ikon, a Chromium instance is started in the background using Puppeteer. The component provided is rendered using React to HTML, which is then screenshot using Puppeteer. All icons are saved and several methods of accessing the icons are also saved - in HTML, TypeScript, JavaScript and JSON.

Using the icons in an app

The simplest method in an app where you have control over the entire document in server-side rendering, either import the generated icons.html file into the <head/> of each page, or use the generated React components in icons.tsx or icons.jsx. In a Next.js application, this would look something similar to:

import Document, { Html, Head, Main, NextScript } from "next/document";

import Icons from "../generated/icons";

class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          <Icons />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

Part of activity

Developer, designer & librarian

Space Countdown

Developing and designing a data-driven web project which has become an extensive and detailed archive of SpaceX's past missions as well as a helpful tool to plan for watching the next launch. As part of this I also maintain the extensive data set used by the site.

Projects within activity:

lazy-images
Performant and smooth image loading for the modern web

nyckel
Authentication for hybrid web apps

ikon
Icon creation for web apps

precision-countdown
Counting down with precision in mind

Space Countdown
A detailed archive of SpaceX flights