@alaya-tech/icons

2.2.6 • Public • Published

alaya-icons

React SVG components bundled for Alaya.

NPM JavaScript Style Guide

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.

License

MIT © alayagood

Readme

Keywords

none

Package Sidebar

Install

npm i @alaya-tech/icons

Weekly Downloads

52

Version

2.2.6

License

MIT

Unpacked Size

3.83 MB

Total Files

379

Last publish

Collaborators

  • fabiocingottinibenevity
  • danicea
  • magino
  • meienberger
  • avilac
  • pjdauvert