@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

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

Available Categories

• Actions
• Buildings
• Business
• Communication
• Custom
• Design
• Development
• Device
• Document
• Editor
• Finance
• Health
• Logos
• Map
• Media
• Others
• System
• User
• Weather

Development

To add new icons to the package:

1. Add SVG files to the appropriate directory in src/icons/
2. Increase the package version in package.json
3. Run yarn build to compile the package
4. Use yarn test to test the tree shaking effectiveness
5. (Optional) Add a new mapping to iconMapping.js (for angular names only)

Publish

1. Run yarn build to bundle the icons for publishing.
2. Run yarn publish to publish the new icons to NPM.

Note: only run yarn publish after the changes have been reviewed. Package version will change after publish.