@ecoportal/icons NPM

@ecoportal/icons

NPM Package for ecoPortal React Icons in the design system. package.

Development

Adding/removing icons

The icon set is controlled by the src/icons directory. Any icons in there will be built via yarn icons. To add or remove icons just add or remove the .svg file.

Icon Guidelines

All icons in the src/icons directory should be in a top level Category folder e.g. Buildings/building-single.svg. The icons are served via an svg file. If an svg is made of all single color paths then they should not have a fill set to allow easy styling wherever imported.

Linking without publishing

If you wish to add icons to the package and test them somewhere else without publishing in this repo run npm link to create a global link on your machine. Then, navigate to the other project consuming @ecoportal/icons and run npm link @ecoportal/icons in that project. This will create a symlink between the local build of this package and what is consumed in the other project. Once happy publish.

EcoPortal Icons

A collection of SVG icons for the EcoPortal design system, optimized for tree shaking.

Installation

npm install @ecoportal/icons
# or
yarn add @ecoportal/icons

Usage

There are three ways to import icons, each with different implications for bundle size:

1. Standard import

Import all icons from the main entry point:

import {
  EpBusinessCalendarFill,
  EpCommunicationChatFill,
} from '@ecoportal/icons';

const MyComponent = () => (
  <div>
    <EpBusinessCalendarFill />
    <EpCommunicationChatFill />
  </div>
);

While this approach is convenient, it may result in a larger bundle size if you're only using a few icons.

2. Category import (recommended for multiple icons from the same category)

If you need multiple icons from the same category, you can import the entire category:

import * as BusinessIcons from '@ecoportal/icons/Business';

const MyComponent = () => (
  <div>
    <BusinessIcons.EpBusinessCalendarFill />
    <BusinessIcons.EpBusinessBriefcaseFill />
  </div>
);

This approach reduces bundle size significantly, as it only includes icons from a specific category.

3. Direct component import (recommended for optimal bundle size)

For maximum optimization, you can import each icon directly from its category:

import EpBusinessCalendarFill from '@ecoportal/icons/Business/EpBusinessCalendarFill';

const MyComponent = () => (
  <div>
    <EpBusinessCalendarFill />
  </div>
);

This method ensures the smallest possible bundle size, as it imports only the exact icon needed.

Bundle Size Comparison

Import Method	Bundle Size	Savings vs Standard Import
Standard Import	~3.5 MB	-
Category Import	~250 KB	~93%
Direct Import	~3 KB	~99.9%

Icon Properties

All icons accept standard SVG and React props:

<EpBusinessCalendarFill
  color='red'
  size={24}
  className='my-icon-class'
  onClick={() => console.log('Icon clicked')}
/>

Icon Naming Convention

All icons follow a consistent naming pattern:

Ep[Category][Name][Style]

For example:

EpBusinessCalendarFill - A filled calendar icon from the Business category
EpCommunicationChatLine - An outlined chat icon from the Communication category