@coorpacademy/nova-icons

4.4.2 • Public • Published

@Coorpacademy/nova-icons

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


Before all


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..

Readme

Keywords

none

Package Sidebar

Install

npm i @coorpacademy/nova-icons

Weekly Downloads

2,018

Version

4.4.2

License

none

Unpacked Size

5.32 MB

Total Files

3187

Last publish

Collaborators

  • yasmine.abdelkefi
  • wernerd
  • antonia.balluais
  • youssef.ezzahi
  • emeline75
  • ghazicoorpacademy
  • silou
  • coorpadmin
  • esa-coorp
  • adriean.khisbe
  • adamska27
  • audric-coorp
  • djamelsoualmi
  • stefanocoorp
  • emorana
  • dfazage