About

This project generates Chakra UI custom Icon components from Ion Icons (v5) svgs.

Features:

• Works with Chakra style props
• Works with Chakra dark/light color modes
• Built in TS
• Treeshakable
• Bootstrapped with TSDX

Example Site

Usage

import { AddOutlineIcon } from 'chakra-ui-ionicons';

// use like this:
<AddOutlineIcon boxSize={5} />;

Naming conventions are as follow:

• Filled : [icon name]Icon, ex AddIcon
• Outlined : [icon name]OutlinedIcon, ex AddOutlinedIcon
• Sharp : [icon name]SharpIcon, ex AddSharpIcon
• Logos : Logo[logo name]Icon, ex LogoGitHubIcon

Generating the icons:

To generate the icons drop the latest Ion Icons svgs into /ionicons directory. Then run:

npm run generate

An input icon like this:

accessibility-outline.svg

<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512">
  <title>Accessibility</title>
  <circle fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32" cx="256" cy="56" r="40"/>
  <path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32" d="M204.23 274.44c2.9-18.06 4.2-35.52-.5-47.59-4-10.38-12.7-16.19-23.2-20.15L88 176.76c-12-4-23.21-10.7-24-23.94-1-17 14-28 29-24 0 0 88 31.14 163 31.14s162-31 162-31c18-5 30 9 30 23.79 0 14.21-11 19.21-24 23.94l-88 31.91c-8 3-21 9-26 18.18-6 10.75-5 29.53-2.1 47.59l5.9 29.63 37.41 163.9c2.8 13.15-6.3 25.44-19.4 27.74S308 489 304.12 476.28l-37.56-115.93q-2.71-8.34-4.8-16.87L256 320l-5.3 21.65q-2.52 10.35-5.8 20.48L208 476.18c-4 12.85-14.5 21.75-27.6 19.46s-22.4-15.59-19.46-27.74l37.39-163.83z"/>
</svg>

Will generate output like this:

accessibility-outline.tsx

import React from 'react';
import { Icon, IconProps } from '@chakra-ui/icon';

export const AccessibilityOutlineIcon = (props: IconProps) => (
  <Icon
    viewBox="0 0 512 512"
    fill="currentcolor"
    stroke="currentcolor"
    {...props}
  >
    <circle
      fill="none"
      stroke="currentColor"
      strokeLinejoin="round"
      strokeWidth="32"
      cx="256"
      cy="56"
      r="40"
    />
    <path
      fill="none"
      stroke="currentColor"
      strokeLinejoin="round"
      strokeWidth="32"
      d="M204.23 274.44c2.9-18.06 4.2-35.52-.5-47.59-4-10.38-12.7-16.19-23.2-20.15L88 176.76c-12-4-23.21-10.7-24-23.94-1-17 14-28 29-24 0 0 88 31.14 163 31.14s162-31 162-31c18-5 30 9 30 23.79 0 14.21-11 19.21-24 23.94l-88 31.91c-8 3-21 9-26 18.18-6 10.75-5 29.53-2.1 47.59l5.9 29.63 37.41 163.9c2.8 13.15-6.3 25.44-19.4 27.74S308 489 304.12 476.28l-37.56-115.93q-2.71-8.34-4.8-16.87L256 320l-5.3 21.65q-2.52 10.35-5.8 20.48L208 476.18c-4 12.85-14.5 21.75-27.6 19.46s-22.4-15.59-19.46-27.74l37.39-163.83z"
    />
  </Icon>
);

The script takes out SVG metadata and turns the attribute names to camelCase so react doesn't complain.