An SVG sprite and illustration asset generator called /ikɔna/.
Inlining SVGs in the DOM comes with a price of performance. This is why we use SVG sprites. But creating and maintaining SVG sprites is a pain. This is where Ikona comes in to help. Ikona distinguishes two types of SVGs: icons and illustrations. Icons are small and simple SVGs that uses only one color. Illustrations are SVGs that are more complex and use multiple colors.
This project is inspired by this article The "best" way to manage icons in React.js.
npm i save-dev @ikona/cli
Create a file named ikona.config.ts
in the root of your project. This file will contain the configuration for Ikona.
import { defineConfig } from '@ikona/cli';
export default defineConfig({
verbose: false,
icons: {
optimize: false,
inputDir: 'src/assets/icons',
spriteOutputDir: 'public/icons',
hash: true,
},
illustrations: {
inputDir: 'public/illustrations',
},
});
To generate SVG sprites, run the following command:
ikona
To use icons, import the generated code to create a React component.
import React from 'react';
import { IconName } from '.ikona/types/icon-name';
import { hash } from '.ikona/hash';
export const Icon = ({ name }: { name: IconName }) => {
return (
<svg>
<use href={`/icons/sprite.${hash}.svg#${name}`} />
</svg>
);
};
To preload SVG sprites, include this snippet in your HTML head
.
import { hash } from '.ikona/hash';
<link rel="preload" as="image/svg+xml" href={`icons/sprite.${hash}.svg`} />;
Illustration is conceptually similar to icons but the difference is that illustrations are more complex and use multiple colors. Illustrations could be
.png
,.jpg
, or.svg
files and they live in a public directory, thats why they use<img>
tag under the hood.
To use illustrations, import the generated code to create a React component.
import React from 'react';
import { IllustrationPath } from '.ikona/types/illustration-path';
export const Illustration = ({ path }: { path: IllustrationPath }) => {
return <img src={path} />;
};
todo
pnpm run dev
Runs the CLI application.
You can pass arguments to your application by running pnpm run dev -- --your-argument
. The extra --
is so that your arguments are passed to your CLI application, and not pnpm
.
pnpm run clean
Removes any built code and any built executables.
pnpm run build
Cleans, then builds the TypeScript code.
Your built code will be in the ./dist/
directory.
pnpm run test
Cleans, then builds, and tests the built code.
pnpm run bundle
Cleans, then builds, then bundles into native executables for Windows, Mac, and Linux.
Your shareable executables will be in the ./exec/
directory.