Meronex Icons

npm

Choose from thousands of popular open source SVG icon packs and add them easily to your React projects with meronex icons.

Installation

npm install @meronex/icons --save

Usage

Default Import

import FaBeer from '@meronex/icons/fa/FaBeer';
class Question extends React.Component {
  render() {
    return <h3> Lets go for a <FaBeer />? </h3>
  }
}

Named Import

Use named imports only when you build supports tree shaking your generated your bundle size.
import { FaBeer } from '@meronex/icons/fa';
class Question extends React.Component {
  render() {
    return <h3> Lets go for a <FaBeer />? </h3>
  }
}

Roadmap

Project Principles & Philosophy

  • Include as many useful and popular icon packs, we don't want to juggle between multiple libraries
  • Maintain backward compatibility, we don't want to refactor all our icons path due to a release
  • Do not assume tree shaking and allow both default and named exports, this should be left as choice
  • Do not bloat the node_modules folder and try to keep it within an acceptable range
  • Keep a reference to documentation site for each major release, we don't want to be forced to update because docs changed
  • Keep the project alive and ensure longevity, refactoring icons is neither fun nor productive

LTS & Release Management

The aim is to keep the version specific site up as a reference even after a major release for those who want to hold on updating to latest.

What results in a major release?

  1. Icon(s) added
  2. Icon(s) removed
  3. Icon(s) changed

A major release implies one or more icons have been changed thus requiring a new version of the preview site.

vNext

  • feat(icons): add spectrum icons
  • feat(preview): implement analyze on the copied icons, how many copied per pack, so we can get an idea of which packs are we using the most and then optimize
  • feat(preview): make the copy code string configurable depending on the icons being imported
  • feat: better typescript support
  • perf: allow adding individual packs such as @meronex/icons-fa this will allow for lighters node_modules
  • refactor: remove references for react_icons npm from the demo and preview site

  • refactor: remove references netlify since surged is used instead

Changelog

All notable changes to this project will be documented in this file. See standard-version for commit guidelines.

4.0.0 (2020-08-08)

⚠ BREAKING CHANGES

  • case sensitive elimination of duplicate files to prevent missing modules error (9c834ea)

    Some build systems will report an error similar to:

    ./node_modules/@meronex/icons/gi/index.esm.js
Cannot find file: 'GiIconName.js' does not match the corresponding name on disk: './node_modules/@meronex/icons/gi/GiIconname.js'.

    The cause of the error is that some SVG icons are added twice in the original icon source folder such as icon_name.svg and iconname.svg. After the name formatting, GiIconName and GIIconname will be considered duplicate and only one file will be created. This fix will prevent the processing of icons with a similar name within an icon pack.

Bug Fixes

  • case sensitive elimination of duplicate files to prevent missing modules error

3.0.0 (2020-08-08)

Features

2.0.2 (2020-08-06)

DOCS

  • update README content

2.0.1 (2020-08-04)

DOCS

  • update README content

2.0.0 (2020-08-04)

⚠ BREAKING CHANGES

  • remove twitter emoji
  • rename IosIosIconXXXX to IosIconeXXXX. In case that you have been using a 1.x.x release, if an icon imports breaks such as (IosIosXXXX) icons then you can find those icons again in the latest preview site (or http://icons-v2.meronex.com) and re-import them again

Features

Bug Fixes

  • fix the preview path to point to the correct folder (9db1772)
  • remove twitter emoji (b9865c3)
  • fix undefined object error (f5c1700)

1.4.1 (2020-07-31)

Bug Fixes

  • adjust the fill attribute based on the value defined in the icon set (873972f)
  • parse all boxicons icons not just regular folder and fix typos (2230756)

1.4.0 (2020-07-29)

Features

1.3.0 (2020-07-29)

Features

1.2.4 (2020-07-29)

Features

  • add css.gg icons (b9a3f51)
  • add fill for remix icons (c092a89)
  • add flag-icon-css and add logos, fix the fill issue, add a delay for getIcons.ts adn cache it. (33220fc)
  • add Material Community Icons (2e7f1cb)
  • add more icon sets and updated the preview theme (f7fd43e)
  • add support for a stroke based icons (3d93316)
  • allow absolute import (0e10a28)

Bug Fixes

More info

  Github Repo ↗

  NPM Package ↗