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

$3

Usage

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

// use like this:
;
`

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

`xml





`

Will generate output like this:

accessibility-outline.tsx

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

export const AccessibilityOutlineIcon = (props: IconProps) => (
viewBox="0 0 512 512"
fill="currentcolor"
stroke="currentcolor"
{...props}
>
fill="none"
stroke="currentColor"
strokeLinejoin="round"
strokeWidth="32"
cx="256"
cy="56"
r="40"
/>
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"
/>

);
``

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