@coorpacademy/nova-icons NPM | npm.io

4.4.2 • Published 6 months ago

Install

Weekly downloads

2,598

License

-

Repository

Last release

6 months ago

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

@coorpacademy/components @infinitebrahmanuniverse/nolb-_coo @everything-registry/sub-chunk-198

8 months ago

8 months ago

8 months ago

8 months ago

9 months ago

6 months ago

6 months ago

6 months ago

8 months ago

4.3.1-alpha.4.44

8 months ago

10 months ago

4.2.7-alpha.3.25

10 months ago

7 months ago

8 months ago

6 months ago

10 months ago

4.2.7-alpha.2.26

10 months ago

9 months ago

4.2.7-alpha.64.31

9 months ago

4.2.7-alpha.1.25

10 months ago

1 year ago

11 months ago

1 year ago

11 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

4.1.3-alpha.25.182

1 year ago

1 year ago

1 year ago

1 year ago

4.1.3-alpha.182

1 year ago

4.1.3-alpha.122

1 year ago

4.1.3-alpha.157

1 year ago

1 year ago

1 year ago

1 year ago

4.1.3-alpha.151

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3.11.2-alpha.6.29

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3.9.15-alpha.24

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3.9.4-alpha.1.10

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

2.6.1-alpha.137

5 years ago

2.6.1-alpha.136

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

1.2.7-alpha.162

5 years ago

1.2.7-alpha.156

5 years ago

5 years ago

1.2.7-alpha.75b85a8f

5 years ago

1.2.7-alpha.f2cc4350

5 years ago

1.2.7-alpha.d328d1f7

5 years ago

1.2.7-alpha.13623864

6 years ago

1.2.7-alpha.a0803baf

6 years ago

1.2.7-alpha.831103c5

6 years ago

1.2.7-alpha.d9b0a0bb

6 years ago

1.2.7-alpha.6278fdc1

6 years ago

1.2.7-alpha.1eac81ef

6 years ago

1.2.7-alpha.51cb6922

6 years ago

1.2.7-alpha.1d11dbb9

6 years ago

1.2.7-alpha.b6eec8d2

6 years ago

1.2.7-alpha.533b6c7b

6 years ago

1.2.7-alpha.5c4219c7

6 years ago

1.2.7-alpha.bd0c64b4

6 years ago

1.2.7-alpha.928fda50

6 years ago

1.2.7-alpha.9bb7ae18

6 years ago

1.2.7-alpha.db2c5aa0

6 years ago

1.2.7-alpha.623b53e5

6 years ago

1.2.7-alpha.922ff40c

6 years ago

1.2.7-alpha.c73cee11

6 years ago

1.2.7-alpha.5785631f

6 years ago

1.2.7-alpha.0b60c6c5

6 years ago

1.2.7-alpha.3f2cae2e

6 years ago

1.2.7-alpha.90e2972a

6 years ago

1.2.7-alpha.b6a6a786

6 years ago

1.2.7-alpha.623e263e

6 years ago

1.2.7-alpha.29484aa3

6 years ago

1.2.7-alpha.55573202

6 years ago

1.2.7-alpha.030ead63

6 years ago

1.2.7-alpha.0b643829

6 years ago

1.2.7-alpha.c77c48a1

6 years ago

1.2.7-alpha.74d04718

6 years ago

1.2.7-alpha.e8a9c1ee

6 years ago

1.2.7-alpha.28c1fb7e

6 years ago

6 years ago

1.2.6-alpha.b5e92aaf

6 years ago

1.2.6-alpha.e4f572e1

6 years ago

1.2.6-alpha.86ee835d

6 years ago

1.2.6-alpha.9c3815aa

6 years ago

1.2.6-alpha.d6b8dade

6 years ago

1.2.6-alpha.2f10f61e

6 years ago

1.2.6-alpha.2342780e

6 years ago

1.2.6-alpha.3142bf61

6 years ago

1.2.6-alpha.72560f86

6 years ago

1.2.6-alpha.868da1b6

6 years ago

1.2.6-alpha.796c0cb9

6 years ago

6 years ago

6 years ago

1.2.4-alpha.90c6909b

6 years ago

6 years ago

1.2.4-alpha.4d0cd0d7

6 years ago

6 years ago

1.2.2-alpha.101ab97b

6 years ago

6 years ago

1.2.1-alpha.2c75be28

6 years ago

1.2.1-alpha.b20b37d8

6 years ago

1.2.1-alpha.d29a811f

6 years ago

1.2.1-alpha.939cae9d

6 years ago

6 years ago

1.1.23-alpha.df9974c0

6 years ago

1.1.23-alpha.a694a73b

6 years ago

1.1.23-alpha.3cf15b37

6 years ago

6 years ago

6 years ago

1.1.21-alpha.ad42f4ef

6 years ago

1.1.21-alpha.71f450b9

6 years ago

1.1.21-alpha.26ab2fcf

6 years ago

1.1.21-alpha.c2e2a253

6 years ago

1.1.21-alpha.b19eecd1

6 years ago

1.1.21-alpha.2e0c5ec3

6 years ago

1.1.21-alpha.49c44363

6 years ago

1.1.21-alpha.df76a66d

6 years ago

1.1.21-alpha.12c1e0ce

6 years ago

1.1.21-alpha.ef185109

6 years ago

1.1.21-alpha.a43a581b

6 years ago

1.1.21-alpha.2f468cd9

6 years ago

1.1.21-alpha.177d9a94

6 years ago

1.1.21-alpha.dac11d58

6 years ago

1.1.20-alpha.e96b0d15

6 years ago

1.1.20-alpha.294376ea

6 years ago

1.1.21-alpha.8362f9ec

6 years ago

1.1.20-alpha.969b3d30

6 years ago

1.1.21-alpha.5c97cce9

6 years ago

1.1.21-alpha.3dccd0f6

6 years ago

1.1.21-alpha.0d72388f

6 years ago

1.1.20-alpha.36200b21

6 years ago

1.1.20-alpha.1586d644

6 years ago

6 years ago

1.1.20-alpha.cbd59c97

6 years ago

1.1.20-alpha.8c4a357f

6 years ago

1.1.20-alpha.9db76769

6 years ago

1.1.20-alpha.28eab182

6 years ago

1.1.19-alpha.8e6e540d

6 years ago

6 years ago

1.1.19-alpha.8357c085

6 years ago

1.1.19-alpha.376eacbb

6 years ago

1.1.19-alpha.0671080d

6 years ago

1.1.19-alpha.38f7b3e1

6 years ago

1.1.19-alpha.e2838381

6 years ago

1.1.19-alpha.0a63eba4

6 years ago

1.1.19-alpha.8da9d42d

6 years ago

1.1.19-alpha.69b83d00

6 years ago

1.1.19-alpha.a6be6812

6 years ago

1.1.19-alpha.53376667

6 years ago

1.1.19-alpha.bf4ad65f

6 years ago

1.1.19-alpha.8c698d5f

6 years ago

1.1.19-alpha.4ed7b2b3

6 years ago

1.1.19-alpha.f429dade

6 years ago

1.1.19-alpha.4d67094a

6 years ago

1.1.19-alpha.380c14c3

6 years ago

1.1.19-alpha.7e905934

6 years ago

1.1.19-alpha.43d2a0b1

6 years ago

1.1.19-alpha.45a4672c

6 years ago

1.1.19-alpha.5dbde67d

6 years ago

1.1.19-alpha.f49fbe67

6 years ago

1.1.19-alpha.cac5b438

6 years ago

1.1.19-alpha.35d49446

6 years ago

1.1.19-alpha.eb59ed53

6 years ago

1.1.19-alpha.e6a84ed4

6 years ago

1.1.19-alpha.12abf49b

6 years ago

1.1.19-alpha.0b41becd

6 years ago

6 years ago

1.1.18-alpha.7e9fdc38

6 years ago

1.1.18-alpha.f5a12b0d

6 years ago

1.1.17-alpha.933faa17

6 years ago

1.1.18-alpha.abdedbe4

6 years ago

6 years ago

1.1.17-alpha.74e577dc

6 years ago

1.1.17-alpha.b19fa485

6 years ago

1.1.17-alpha.f35ce74a

6 years ago

1.1.17-alpha.c84c1d44

6 years ago

6 years ago

1.1.16-alpha.1ab9dbe9

7 years ago

7 years ago

1.1.15-alpha.42f3a920

7 years ago

1.1.15-alpha.51c12e08

7 years ago

7 years ago

7 years ago

1.1.13-alpha.ba173e5f

7 years ago

7 years ago

7 years ago

1.1.11-alpha.091e4a1b

7 years ago

1.1.11-alpha.2264c6f2

7 years ago

1.1.11-alpha.37d2dad2

7 years ago

1.1.11-alpha.57b032b7

7 years ago

1.2.0-alpha.57b032b7

7 years ago

1.2.0-alpha.1e25fa9b

7 years ago

1.2.0-alpha.edfef8a7

7 years ago

1.2.0-alpha.8866f1ab

7 years ago

1.2.0-alpha.ee18ffef

7 years ago

1.2.0-alpha.940d3e04

7 years ago

1.2.0-alpha.65d221ed

7 years ago

1.2.0-alpha.f9a89e44

7 years ago

1.2.0-alpha.17cb2b5e

7 years ago

1.2.0-alpha.5faa490b

7 years ago

7 years ago

1.2.0-alpha.4c078354

7 years ago

7 years ago

7 years ago

7 years ago

1.2.0-alpha.6e5475b7

7 years ago

1.2.0-alpha.c6859816

7 years ago

1.2.0-alpha.3c22132c

7 years ago

1.2.0-alpha.a994aae2

7 years ago

1.2.0-alpha.c95d0d30

7 years ago

7 years ago

1.2.0-alpha.7dd8a80a

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

1.2.0-alpha.023d9dd6

7 years ago

1.2.0-alpha.21d8c45b

7 years ago

1.2.0-alpha.3ab4e959

7 years ago

1.2.0-alpha.2233f593

7 years ago

1.2.0-alpha.cc5482ce

7 years ago

7 years ago

1.1.0-alpha.75df4055

7 years ago

1.1.0-alpha.339651a5

7 years ago

1.1.0-alpha.e2689634

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago