@coorpacademy/nova-icons

@Coorpacademy/nova-icons

Components bank (react and react-native) based on Nova SVG icons (through Iconjar files)

Before all

• Download iconjar application for macos (https://geticonjar.com/) or free app nucleoapp (https://nucleoapp.com/)

Adding an icon

• Open IconJar https://geticonjar.com/
• Delete the previous collection if any
• Import the collection from packages/@coorpacademy-nova-icons/third-party or create a new one.

Adding an icon - colors & RGAA

Colors:

• If you want any path's color to be injected (to be replaced by currentColor/props.color), set color #757575.

ex:

    <svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
      viewBox="0 0 18.1 18" style="enable-background:new 0 0 18.1 18;" xml:space="preserve">
    <path stroke="#757575" d="M1,9h10.9"/>
    <path fill="#757575" d="M9,6.1L11.9,9L9,11.9"/>
    <path stroke="#4B4C4C" d="M1.7,5.7C3,2.9,5.8,1,9,1c4.4,0,8,3.6,8,8c0,4.4-3.6,8-8,8c-3.3,0-6.1-1.9-7.3-4.7"/>
    </svg>

(the last path is going to keep #4B4C4C as its color) anything else will remain as is

• You must set replaceColors to false (replaceColors: false) in ./icons.js if you don't want the original color to be replaced by the script.

ex:

  {
    filePath: path.resolve('./third-party/nova-composition.iconjar/icons/draft.svg'),
    replaceColors: false
  }

RGAA:

• if you want to use an aria-label or alt prop, you can pass it as a prop directly, this would add role="img" automatically. If you want an aria-hidden prop instead, it will be added automatically if you don't use an aria-label or alt.

Adding an icon - final steps

• Drag and drop your SVG file into a collection (in iconJar)
• Export the new updated iconjar collection (be careful to have the same name when you export, to erase the old one)
• Add the brand new svg icon's path into icons.js file that's in root project (if you're SVG has a color and you want to keep it, you can add the property: replaceColors: false)
• Generate the component using yarn prepare
• You have to commit the Meta file

Usage

import React from "react";
import { NovaCompositionCoorpacademyCog } from "@coorpacademy/nova-icons";

const MyComponent = () => (
  <NovaCompositionCoorpacademyCog width={32} height={32} color="#123456" />
);

export default MyComponent;

Note: React-Native component will automatically be resolved as Metro supports .native.js extension.

Props

You can use the props supported by svg and react-native-svg <SVG /> component with camel case format (ie: strokeColor).

Contributing

Please, run yarn test before submitting a pull request..