@alaya-tech/icons
v2.2.6
Published
> React SVG components bundled for Alaya.
Downloads
201
Keywords
Readme
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
andcommon
. Drop the new icons into thesrc/svgs
. - Run
yarn gen:svgr
. It will transform svg files in thesrc/svgs
directory intosrc/svgComponents
. - Open the
src/index.js
to include the new icons as imported react component fromsrc/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
andcommon
. 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
orCOMMON
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