Skip to content

Ion Icons (v5) built with the Icon wrapper from Chakra UI

License

Notifications You must be signed in to change notification settings

justdanallen/chakra-ui-ionicons

Repository files navigation

About

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

NPM

Features:

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

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.

About

Ion Icons (v5) built with the Icon wrapper from Chakra UI

Resources

License

Stars

Watchers

Forks

Packages

No packages published