@alaya-tech/icons NPM

alaya-icons

React SVG components bundled for Alaya.

alaya-icons

Install

npm install --save alaya-icons

Usage

import React, { Component } from 'react';

import Icon from 'alaya-icons';

class Example extends Component {
  render() {
    return (
      <div>
        <Icon name="flaticon-admin" />
        <Icon name="flaticon-award" />
        <Icon name="flaticon-bath" />
        <Icon name="flaticon-bookmark" />
      </div>
    );
  }
}

Development

Local development is broken into two parts (ideally using two tabs).

First, run rollup to watch your src/ module and automatically recompile it into dist/ whenever you make changes.

npm start # runs rollup with watch flag

The second part will be running the example/ create-react-app that's linked to the local version of your module.

# (in another tab)
cd example
npm start # runs create-react-app dev server

Now, anytime you make a change to your library in src/ or to the example app's example/src, create-react-app will live-reload your local dev server so you can iterate on your component in real-time.

Add New Icons

Adding new .svg icons as a React component can be pretty easy with these steps to follow:

Move to icons package. cd packages/icons.
We have two sets of icons: branding and common. Drop the new icons into the src/svgs.
Run yarn gen:svgr. It will transform svg files in the src/svgs directory into src/svgComponents.
Open the src/index.js to include the new icons as imported react component from src/svgComponents folder.
Show the new icons in the demo page. Follow the instructions below.

Show New Icons to Demo page

Once you have generated a new icon component using the gen:svgr script, follow these steps:

First, you have to understand we have two sets of icons: branding and common. Branding icons have color #4ABFAB (tortoise) while Common icons have #123336 have (dark-green).
Open demo/src/BrandingDemo.tsx file.
Append the icon name into either BRANDING or COMMON based on the color.
Move to the root folder cd ../../.
Run yarn build to rebuild the project.
Run yarn dev to start the demo page in development mode.