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.

Project Linking

It is possible to use your library without actually publishing it. First, create an open link to your library. Run npm link in the project root folder.

npm link

Next, go to you application that would use the library and link the library

npm link alaya-icons

Add New Icons

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

• Drop the new icons into the src/svgs.
• Move to icons package. cd packages/icons.
• 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