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-action' />
        <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.
• Open the src/index.js to include the new icons as imported react component.
• Run npm run gen:svgr which will transform svg files in the src/svgs directory into src/svgComponents.

License

MIT © alayagood