We The Curious Developers

We The Curious Developers

  • Guidelines
  • CuriOs SDK
  • Software
  • Films
  • Art
  • Audio
  • Photography

›Components

Getting Started

  • Getting Started Overview
  • ClI
  • Working With Us

Technical

  • Hardware

Frames

  • Frames Overview
  • Info Panel
  • Media Browser
  • Touch to Start

Components

  • Components Overview
  • Box
  • Button
  • Card
  • Checkbox
  • Header
  • Heading
  • Hero
  • Icon
  • Text Input
  • Markdown Viewer
  • Modal
  • WTCProvider
  • Table
  • Text
  • Video Player
  • Calendar
  • Dropdown
  • InputAutoComplete
  • Radio
  • Sidebar
  • Slider
  • Notification
  • IconNavButton
  • IconSideBar
  • List
  • Tab
  • Title
  • Toggle
  • Value

Icon component

An icon component. The SVG information comes from a JSON object served by the assets service. Because of the way the SVG is served the component only supports the following SVG elements (more can be added as needed):

  • path
  • circle
  • rect

Install

npm i @wtc-components/icon -S

Usage

Import it into your project

import { Icon, IconProps, IconType } from '../src/components/Icon'

Prop

<Icon
  icon={'icon-name'}
  color="blue"
  strokeWidth="5"
  size={Size.L}
  isFill={true}
/>

Props

PropDescriptionDefault
sizeExists in settings definitionSize.S
iconWhat icon to show
colorColor of the icon. This can either be a single color as a string or an object {fill: #000, stroke: #000}#000
strokeWidthWidth of the stroke of the icon.4
isFillSets whether icon should fill parent.false
Last updated on 5/7/2019
← HeroText Input →
  • Install
  • Usage
  • Prop
    • Props
Docs
Getting Started (or other categories)Guides (or other categories)API Reference (or other categories)
Community
User ShowcaseStack OverflowProject ChatTwitter
More
BlogGitHubStar
Copyright © 2020 We The Curious