@cogeco-web/icons v4.0.3

Cogeco Icon Library

Description

Library of all custom Cogeco Icons

Usage

Example

import { AgentDuoCoral, Activity } from '@cogeco-web/icons'

const myComponent = () => JSX.Element {
  return (
    <>
      <AgentDuoCoral />
      <AgentDuoCoral fontSize={24} />

      System icons, can modify size and color
      <Activity fontSize={18} color='#001E62' />
    </>
  )
}

Create/update icons

Note: we're using svgr cli to convert the svgs into React components (https://react-svgr.com/docs/cli/)

We're disabling @svgr/cli' prettier, and then running prettier after, because of an incompability of versions where @svgr/cli uses an older version

Verify svgs are in correct format, and follows the naming convention

1. Verify that all svgs were given to us with the correct naming convention (https://cogeco.atlassian.net/wiki/spaces/YODA/pages/3393945640/Shared+Library+-+Icon+naming+convention)

2. Rename the svgs, use the command yarn rename, make sure all the new svgs are placed in a directory name src/svg/new before running the command.

3. The colorless version of the icons (ex: actif, actif88) are copies from their white versions (ex: actif-white, actif-white-88). Before generating the react components for the colorless and system icons,

• We need to remove any fill="white" or fill="black" attributes, from svgs that are using fills
• The svgs using strokes, the stroke color needs to be replaced with currentColor stroke="currentColor"

Convert all icons

To convert all 5 icons pack together, use this command:

yarn generate

Convert icons pack one by one

You can convert the icons pack one by one by doing these 5 commands:

Converting size 38 duo icons into components

yarn generate:38-duo

Converting size 38 icons (colorless) into components

yarn generate:38

Converting size 88 duo icons into components

yarn generate:88-duo

Converting size 88 icons (colorless) into components

yarn generate:88

Converting system icons into components

yarn generate:system