Skip to content
This repository has been archived by the owner on Aug 3, 2023. It is now read-only.

Commit

Permalink
new way to use icons
Browse files Browse the repository at this point in the history
  • Loading branch information
jrgarciadev committed Dec 26, 2020
1 parent f37adb5 commit 333f30e
Show file tree
Hide file tree
Showing 8 changed files with 321 additions and 161 deletions.
16 changes: 14 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,18 @@ const App = () => {
export default App;
```

You can also use Iconly component and then set then icon name you prefer:
```jsx
import React from 'react';
import { Iconly } from 'react-iconly';

const App = () => {
return <Iconly name="Search" set="bulk" primaryColor="blueviolet" size="xlarge"/>
};

export default App;
```

Icons can be configured with inline props:
```jsx
<Home set="two-tone" primaryColor="blueviolet" secondaryColor="blue" stroke="bold" size="xlarge"/>
Expand All @@ -68,10 +80,10 @@ You can also include the whole icon pack:

```jsx
import React from 'react';
import * as Iconly from 'react-iconly';
import * as IconlyPack from 'react-iconly';

const App = () => {
return <Iconly.Home set="bulk" primaryColor="blueviolet" secondaryColor="blue" stroke="bold" size="xlarge"/>
return <IconlyPack.Home set="bulk" primaryColor="blueviolet" secondaryColor="blue" stroke="bold" size="xlarge"/>
};

export default App;
Expand Down
103 changes: 52 additions & 51 deletions example/src/App.js
Original file line number Diff line number Diff line change
@@ -1,60 +1,61 @@
import React from 'react'

import * as Iconly from 'react-iconly'
import * as IconlyPack from 'react-iconly'

const App = () => {
return (
<React.Fragment>
<Iconly.IconlyProvider set="two-tone" stroke="bold" primaryColor="blue" size="xlarge">
<Iconly.Search />
<Iconly.Folder set="two-tone" primaryColor="#d6d" secondaryColor="#6D00F5" stroke="bold" size="xlarge"/>
<Iconly.Wallet set="two-tone" primaryColor="#d6d" secondaryColor="#6D00F5" stroke="bold" size="xlarge"/>
<Iconly.Graph set="two-tone" primaryColor="#d6d" secondaryColor="#6D00F5" stroke="bold" size="xlarge"/>
<Iconly.Bookmark set="bold" primaryColor="#d6d" secondaryColor="#6D00F5" stroke="bold" size="xlarge"/>
<Iconly.Category primaryColor="#d6d" secondaryColor="#6D00F5" stroke="bold" size="xlarge"/>
<Iconly.Home set="two-tone" primaryColor="#d6d" secondaryColor="#6D00F5" stroke="bold" size="xlarge"/>
<Iconly.Notification set="two-tone" primaryColor="#d6d" secondaryColor="#6D00F5" stroke="bold" size="xlarge"/>
<Iconly.Chat set="two-tone" primaryColor="#d6d" secondaryColor="#6D00F5" stroke="bold" size="xlarge"/>
<Iconly.Heart set="bulk" stroke="bold" size="xlarge"/>
<Iconly.Heart2 set="two-tone" primaryColor="#d6d" secondaryColor="#6D00F5" stroke="bold" size="xlarge"/>
<Iconly.Paper set="two-tone" primaryColor="#d6d" secondaryColor="#6D00F5" stroke="bold" size="xlarge"/>
<Iconly.PaperPlus set="two-tone" primaryColor="#d6d" secondaryColor="#6D00F5" stroke="bold" size="xlarge"/>
<Iconly.PaperNegative set="two-tone" primaryColor="#d6d" secondaryColor="#d6d" stroke="bold" size="xlarge"/>
<Iconly.PaperFall set="two-tone" primaryColor="#d6d" secondaryColor="#d6d" stroke="bold" size="xlarge"/>
<Iconly.PaperDownload primaryColor="#d6d" stroke="bold" size="xlarge"/>
<Iconly.PaperUpload primaryColor="#d6d" stroke="bold" size="xlarge"/>
<Iconly.Send primaryColor="#d6d" stroke="bold" size="xlarge"/>
<Iconly.Send style={{ transform: 'rotate(45deg)' }} primaryColor="#d6d" stroke="bold" size="xlarge"/>
<Iconly.Password primaryColor="#d6d" stroke="bold" size="xlarge"/>
<Iconly.Work primaryColor="#d6d" stroke="bold" size="xlarge"/>
<Iconly.Scan primaryColor="#d6d" stroke="bold" size="xlarge"/>
<Iconly.Calendar primaryColor="#d6d" stroke="bold" size="xlarge"/>
<Iconly.Message primaryColor="#d6d" stroke="bold" size="xlarge"/>
<Iconly.Video primaryColor="#d6d" stroke="bold" size="xlarge"/>
<Iconly.Plus primaryColor="#d6d" stroke="bold" size="xlarge"/>
<Iconly.Chart primaryColor="#d6d" stroke="bold" size="xlarge"/>
<Iconly.Game primaryColor="#d6d" stroke="bold" size="xlarge"/>
<Iconly.Bag set="bulk" primaryColor="#d6d" stroke="bold" size="xlarge"/>
<Iconly.Bag2 set="bulk" primaryColor="#d6d" stroke="bold" size="xlarge"/>
<Iconly.TicketStar set="bulk" primaryColor="#d6d" stroke="bold" size="xlarge"/>
<Iconly.MoreCircle set="broken" primaryColor="#d6d" stroke="bold" size="xlarge"/>
<Iconly.MoreSquare set="broken" primaryColor="#d6d" stroke="bold" size="xlarge"/>
<Iconly.Discount primaryColor="#d6d" stroke="bold" size="xlarge"/>
<Iconly.Buy primaryColor="#d6d" stroke="bold" size="xlarge"/>
<Iconly.InfoCircle primaryColor="#d6d" stroke="bold" size="xlarge"/>
<Iconly.InfoSquare primaryColor="#d6d" stroke="bold" size="xlarge"/>
<Iconly.Danger primaryColor="#d6d" stroke="bold" size="xlarge"/>
<Iconly.CloseSquare primaryColor="#d6d" stroke="bold" size="xlarge"/>
<Iconly.TickSquare primaryColor="#d6d" stroke="bold" size="xlarge"/>
<Iconly.Discovery primaryColor="#d6d" stroke="bold" size="xlarge"/>
<Iconly.Location primaryColor="#d6d" stroke="bold" size="xlarge"/>
<Iconly.Document primaryColor="#d6d" stroke="bold" size="xlarge"/>
<Iconly.Setting primaryColor="#d6d" stroke="bold" size="xlarge"/>
<Iconly.TimeSquare primaryColor="#d6d" stroke="bold" size="xlarge"/>
<Iconly.TimeCircle primaryColor="#d6d" stroke="bold" size="xlarge"/>
<Iconly.CaretRight set="bulk" primaryColor="#d6d" stroke="bold" size="xlarge"/>
<Iconly.ArrowDownSquare/>
</Iconly.IconlyProvider>
<IconlyPack.IconlyProvider set="two-tone" stroke="bold" primaryColor="blue" size="xlarge">
<IconlyPack.Search />
<IconlyPack.Folder set="two-tone" primaryColor="#d6d" secondaryColor="#6D00F5" stroke="bold" size="xlarge"/>
<IconlyPack.Wallet set="two-tone" primaryColor="#d6d" secondaryColor="#6D00F5" stroke="bold" size="xlarge"/>
<IconlyPack.Graph set="two-tone" primaryColor="#d6d" secondaryColor="#6D00F5" stroke="bold" size="xlarge"/>
<IconlyPack.Bookmark set="bold" primaryColor="#d6d" secondaryColor="#6D00F5" stroke="bold" size="xlarge"/>
<IconlyPack.Category primaryColor="#d6d" secondaryColor="#6D00F5" stroke="bold" size="xlarge"/>
<IconlyPack.Home set="two-tone" primaryColor="#d6d" secondaryColor="#6D00F5" stroke="bold" size="xlarge"/>
<IconlyPack.Notification set="two-tone" primaryColor="#d6d" secondaryColor="#6D00F5" stroke="bold" size="xlarge"/>
<IconlyPack.Chat set="two-tone" primaryColor="#d6d" secondaryColor="#6D00F5" stroke="bold" size="xlarge"/>
<IconlyPack.Heart set="bulk" stroke="bold" size="xlarge"/>
<IconlyPack.Heart2 set="two-tone" primaryColor="#d6d" secondaryColor="#6D00F5" stroke="bold" size="xlarge"/>
<IconlyPack.Paper set="two-tone" primaryColor="#d6d" secondaryColor="#6D00F5" stroke="bold" size="xlarge"/>
<IconlyPack.PaperPlus set="two-tone" primaryColor="#d6d" secondaryColor="#6D00F5" stroke="bold" size="xlarge"/>
<IconlyPack.PaperNegative set="two-tone" primaryColor="#d6d" secondaryColor="#d6d" stroke="bold" size="xlarge"/>
<IconlyPack.PaperFall set="two-tone" primaryColor="#d6d" secondaryColor="#d6d" stroke="bold" size="xlarge"/>
<IconlyPack.PaperDownload primaryColor="#d6d" stroke="bold" size="xlarge"/>
<IconlyPack.PaperUpload primaryColor="#d6d" stroke="bold" size="xlarge"/>
<IconlyPack.Send primaryColor="#d6d" stroke="bold" size="xlarge"/>
<IconlyPack.Send style={{ transform: 'rotate(45deg)' }} primaryColor="#d6d" stroke="bold" size="xlarge"/>
<IconlyPack.Password primaryColor="#d6d" stroke="bold" size="xlarge"/>
<IconlyPack.Work primaryColor="#d6d" stroke="bold" size="xlarge"/>
<IconlyPack.Scan primaryColor="#d6d" stroke="bold" size="xlarge"/>
<IconlyPack.Calendar primaryColor="#d6d" stroke="bold" size="xlarge"/>
<IconlyPack.Message primaryColor="#d6d" stroke="bold" size="xlarge"/>
<IconlyPack.Video primaryColor="#d6d" stroke="bold" size="xlarge"/>
<IconlyPack.Plus primaryColor="#d6d" stroke="bold" size="xlarge"/>
<IconlyPack.Chart primaryColor="#d6d" stroke="bold" size="xlarge"/>
<IconlyPack.Game primaryColor="#d6d" stroke="bold" size="xlarge"/>
<IconlyPack.Bag set="bulk" primaryColor="#d6d" stroke="bold" size="xlarge"/>
<IconlyPack.Bag2 set="bulk" primaryColor="#d6d" stroke="bold" size="xlarge"/>
<IconlyPack.TicketStar set="bulk" primaryColor="#d6d" stroke="bold" size="xlarge"/>
<IconlyPack.MoreCircle set="broken" primaryColor="#d6d" stroke="bold" size="xlarge"/>
<IconlyPack.MoreSquare set="broken" primaryColor="#d6d" stroke="bold" size="xlarge"/>
<IconlyPack.Discount primaryColor="#d6d" stroke="bold" size="xlarge"/>
<IconlyPack.Buy primaryColor="#d6d" stroke="bold" size="xlarge"/>
<IconlyPack.InfoCircle primaryColor="#d6d" stroke="bold" size="xlarge"/>
<IconlyPack.InfoSquare primaryColor="#d6d" stroke="bold" size="xlarge"/>
<IconlyPack.Danger primaryColor="#d6d" stroke="bold" size="xlarge"/>
<IconlyPack.CloseSquare primaryColor="#d6d" stroke="bold" size="xlarge"/>
<IconlyPack.TickSquare primaryColor="#d6d" stroke="bold" size="xlarge"/>
<IconlyPack.Discovery primaryColor="#d6d" stroke="bold" size="xlarge"/>
<IconlyPack.Location primaryColor="#d6d" stroke="bold" size="xlarge"/>
<IconlyPack.Document primaryColor="#d6d" stroke="bold" size="xlarge"/>
<IconlyPack.Setting primaryColor="#d6d" stroke="bold" size="xlarge"/>
<IconlyPack.TimeSquare primaryColor="#d6d" stroke="bold" size="xlarge"/>
<IconlyPack.TimeCircle primaryColor="#d6d" stroke="bold" size="xlarge"/>
<IconlyPack.CaretRight set="bulk" primaryColor="#d6d" stroke="bold" size="xlarge"/>
<IconlyPack.ArrowDownSquare/>
</IconlyPack.IconlyProvider>
<IconlyPack.Iconly name="Video" set="broken" primaryColor="#d6d" stroke="bold" size="xlarge"/> {/* Get icon by name */}
</React.Fragment>
)
}
Expand Down
3 changes: 2 additions & 1 deletion src/Icons/Star.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import * as React from 'react'
import PropTypes from 'prop-types'
import withIcon from '../lib/withIcon'

const Star = ({ color, strokeWidth, opacity, set }) => {
const Star = ({ color, secondaryColor, strokeWidth, opacity, set }) => {
const Bold = () => (
<g transform='translate(2 2.5)'>
<path
Expand Down Expand Up @@ -65,6 +65,7 @@ Star.displayName = 'IconlyStar'
Star.propTypes = {
opacity: PropTypes.string,
color: PropTypes.string,
secondaryColor: PropTypes.string,
set: PropTypes.string,
strokeWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
}
Expand Down
101 changes: 101 additions & 0 deletions src/Icons/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
export { default as Search } from './Search'
export { default as Folder } from './Folder'
export { default as Wallet } from './Wallet'
export { default as Graph } from './Graph'
export { default as Bookmark } from './Bookmark'
export { default as Category } from './Category'
export { default as Home } from './Home'
export { default as Notification } from './Notification'
export { default as Chat } from './Chat'
export { default as Heart } from './Heart'
export { default as Heart2 } from './Heart2'
export { default as Paper } from './Paper'
export { default as PaperPlus } from './PaperPlus'
export { default as PaperNegative } from './PaperNegative'
export { default as PaperFall } from './PaperFall'
export { default as PaperDownload } from './PaperDownload'
export { default as PaperUpload } from './PaperUpload'
export { default as Send } from './Send'
export { default as Password } from './Password'
export { default as Swap } from './Swap'
export { default as Work } from './Work'
export { default as Scan } from './Scan'
export { default as Activity } from './Activity'
export { default as Calendar } from './Calendar'
export { default as Message } from './Message'
export { default as Video } from './Video'
export { default as Plus } from './Plus'
export { default as Chart } from './Chart'
export { default as Game } from './Game'
export { default as Bag } from './Bag'
export { default as Bag2 } from './Bag2'
export { default as TicketStar } from './TicketStar'
export { default as MoreCircle } from './MoreCircle'
export { default as MoreSquare } from './MoreSquare'
export { default as Discount } from './Discount'
export { default as Buy } from './Buy'
export { default as InfoCircle } from './InfoCircle'
export { default as InfoSquare } from './InfoSquare'
export { default as Danger } from './Danger'
export { default as CloseSquare } from './CloseSquare'
export { default as TickSquare } from './TickSquare'
export { default as Discovery } from './Discovery'
export { default as Location } from './Location'
export { default as Document } from './Document'
export { default as Setting } from './Setting'
export { default as TimeSquare } from './TimeSquare'
export { default as TimeCircle } from './TimeCircle'
export { default as VolumeUp } from './VolumeUp'
export { default as VolumeDown } from './VolumeDown'
export { default as VolumeOff } from './VolumeOff'
export { default as Star } from './Star'
export { default as Ticket } from './Ticket'
export { default as Camera } from './Camera'
export { default as User } from './User'
export { default as AddUser } from './AddUser'
export { default as TwoUsers } from './TwoUsers'
export { default as People } from './People'
export { default as Login } from './Login'
export { default as Logout } from './Logout'
export { default as Download } from './Download'
export { default as Upload } from './Upload'
export { default as Voice } from './Voice'
export { default as Voice2 } from './Voice2'
export { default as Delete } from './Delete'
export { default as Edit } from './Edit'
export { default as EditSquare } from './EditSquare'
export { default as Play } from './Play'
export { default as ShieldDone } from './ShieldDone'
export { default as ShieldFall } from './ShieldFall'
export { default as Show } from './Show'
export { default as Hide } from './Hide'
export { default as Filter } from './Filter'
export { default as Filter2 } from './Filter2'
export { default as Image } from './Image'
export { default as Image2 } from './Image2'
export { default as Call } from './Call'
export { default as Calling } from './Calling'
export { default as CallMissed } from './CallMissed'
export { default as CallSilent } from './CallSilent'
export { default as Lock } from './Lock'
export { default as Unlock } from './Unlock'
export { default as ChevronDownCircle } from './ChevronDownCircle'
export { default as ChevronRightCircle } from './ChevronRightCircle'
export { default as ChevronUpCircle } from './ChevronUpCircle'
export { default as ChevronLeftCircle } from './ChevronLeftCircle'
export { default as ChevronDown } from './ChevronDown'
export { default as ChevronRight } from './ChevronRight'
export { default as ChevronUp } from './ChevronUp'
export { default as ChevronLeft } from './ChevronLeft'
export { default as ArrowDownSquare } from './ArrowDownSquare'
export { default as ArrowRightSquare } from './ArrowRightSquare'
export { default as ArrowUpSquare } from './ArrowUpSquare'
export { default as ArrowLeftSquare } from './ArrowLeftSquare'
export { default as ArrowDown } from './ArrowDown'
export { default as ArrowRight } from './ArrowRight'
export { default as ArrowUp } from './ArrowUp'
export { default as ArrowLeft } from './ArrowLeft'
export { default as CaretRight } from './CaretRight'
export { default as CaretDown } from './CaretDown'
export { default as CaretUp } from './CaretUp'
export { default as CaretLeft } from './CaretLeft'
Loading

1 comment on commit 333f30e

@vercel
Copy link

@vercel vercel bot commented on 333f30e Dec 26, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.