cf-component-icon
Cloudflare Icon Component
Installation
Installation with yarn is recommended
$ yarn add cf-component-icon
Usage
import React from 'react';import Icon from 'cf-component-icon'; import createComponent from 'cf-style-container'; const ColorWrapper = ;ColorWrapper; const TextWrapper = ;TextWrapper; const IconComponent = <div> <p>Types:</p> <p> <Icon ="caret-down" ="caret-down" /> <Icon ="caret-left" ="caret-left" /> <Icon ="caret-right" ="caret-right" /> <Icon ="caret-up" ="caret-up" /> <Icon ="resize-horizontal" ="resize-horizontal" /> <Icon ="reorder" ="reorder" /> <Icon ="forward" ="forward" /> <Icon ="backward" ="backward" /> <Icon ="left" ="left" /> <Icon ="right" ="right" /> <Icon ="collapse" ="collapse" /> <Icon ="edgeworker" ="edgeworker" /> <Icon ="expand" ="expand" /> <Icon ="retarget" ="retarget" /> <Icon ="linkedin" ="linkedin" /> <Icon ="twitter" ="twitter" /> <Icon ="google-plus" ="google-plus" /> <Icon ="facebook" ="facebook" /> <Icon ="filter" ="filter" /> <Icon ="calendar" ="calendar" /> <Icon ="file" ="file" /> <Icon ="clipboard" ="clipboard" /> <Icon ="drive" ="drive" /> <Icon ="speech" ="speech" /> <Icon ="flowchart" ="flowchart" /> <Icon ="flowchart-alt" ="flowchart-alt" /> <Icon ="hamburger" ="hamburger" /> <Icon ="list" ="list" /> <Icon ="gear" ="gear" /> <Icon ="chart" ="chart" /> <Icon ="help" ="help" /> <Icon ="info-sign" ="info-sign" /> <Icon ="ok-sign" ="ok-sign" /> <Icon ="exclamation-sign" ="exclamation-sign" /> <Icon ="refresh" ="refresh" /> <Icon ="time" ="time" /> <Icon ="sad" ="sad" /> <Icon ="happy" ="happy" /> <Icon ="minus" ="minus" /> <Icon ="ok" ="ok" /> <Icon ="pause" ="pause" /> <Icon ="plus" ="plus" /> <Icon ="remove" ="remove" /> <Icon ="search" ="search" /> <Icon ="lock" ="lock" /> <Icon ="shield" ="shield" /> <Icon ="spectrum" ="spectrum" /> <Icon ="upload" ="upload" /> <Icon ="wrench" ="wrench" /> <Icon ="bolt" ="bolt" /> <Icon ="user" ="user" /> <Icon ="stream" ="stream" /> </p> <p>Sizes:</p> <p> <Icon ="2x" ="2x" ="gear" /> <TextWrapper>2x</TextWrapper> <Icon ="2.5x" ="2.5x" ="gear" /> <TextWrapper>25x</TextWrapper> <Icon ="3x" ="3x" ="gear" /> <TextWrapper>3x</TextWrapper> <Icon ="3.5x" ="3.5x" ="gear" /> <TextWrapper>35x</TextWrapper> <Icon ="4x" ="4x" ="gear" /> <TextWrapper>4x</TextWrapper> </p> <p>Colors:</p> <p> <ColorWrapper> <Icon ="default" ="2x" ="search" ="default" /> <TextWrapper>Default</TextWrapper> <Icon ="primary" ="2x" ="caret-right" ="primary" /> <TextWrapper>Primary</TextWrapper> <Icon ="success" ="2x" ="ok" ="success" /> <TextWrapper>Success</TextWrapper> <Icon ="warning" ="2x" ="info-sign" ="warning" /> <TextWrapper>Warning</TextWrapper> <Icon ="danger" ="2x" ="exclamation-sign" ="danger" /> <TextWrapper>Danger</TextWrapper> <Icon ="black" ="2x" ="remove" ="black" /> <TextWrapper>Black</TextWrapper> <Icon ="white" ="2x" ="shield" ="white" /> <TextWrapper>White</TextWrapper> </ColorWrapper> </p> </div>; ;