alaya-icons

React SVG components bundled for Alaya.

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.

License

MIT © alayagood