How Tos

Build Icons

Colours for the UN design system

icons-core allows you to create your own icon library. An example project can be found TODO: Update here.

It uses svgo and react-svgr to create optimized svg files and react components.

Create a node script to run the build process:

import path from "path";
import { fileURLToPath } from "url";
import { dirname } from "path";


import { convertFolder, jsx } from "@wfp/icons-core";


const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);


const srcFolder = "../icons/src/svg";
const distFolder = path.resolve(__dirname, "dist");


convertFolder(
  srcFolder,
  distFolder,
  jsx /* The converter, can be jsx, svg or a custom converter */
);

Starting the build script from package.json

"scripts": {
    "build": "node config.mjs"
  }

References