bpk-component-icon - npm Package Compare versions

Comparing version 0.2.11 to 0.2.12

package.json

		{
		"name": "bpk-component-icon",
		"version": "0.2.11",
		"version": "0.2.12",
		"description": "Backpack icon component.",
		@@ -16,6 +16,6 @@ "main": "index.js",
		"dependencies": {
		"bpk-mixins": "^4.1.0",
		"bpk-svgs": "^1.0.3",
		"bpk-tokens": "^11.1.0"
		"bpk-mixins": "^5.0.0",
		"bpk-svgs": "^1.0.4",
		"bpk-tokens": "^12.0.0"
		}
		}

readme.md

		@@ -5,3 +5,3 @@ # bpk-component-icon

		### Installation
		## Installation

		@@ -17,3 +17,3 @@ ```sh

		### Usage
		## Usage

		@@ -23,6 +23,16 @@ ```js
		import BpkIcon from 'bpk-component-icon'
		import TOKENS from 'bpk-tokens/tokens/base.common'

		export default MyComponent = () => (
		<BpkIcon icon='flight' />
		<BpkIcon icon='flight' color={TOKENS.colorBlue500} />
		)
		```

		### Props

		\| Property \| PropType \| Required \| Default Value \|
		\| ------------- \| -------- \| -------- \| ------------------- \|
		\| icon \| string \| true \| - \|
		\| large \| bool \| false \| - \|
		\| color \| string \| false \| TOKENS.colorGray700 \|
		\| alignToButton \| bool \| false \| false \|

src/BpkIcon.js

		@@ -19,7 +19,7 @@ import React, { PropTypes } from 'react'

		const BpkIcon = ({ icon, large, color, alignToButton }) => {
		const __html = getSvg(icon, large, color)
		const classNames = [ large ? 'bpk-icon-lg' : 'bpk-icon-sm' ]
		const BpkIcon = (props) => {
		const __html = getSvg(props.icon, props.large, props.color)
		const classNames = [ props.large ? 'bpk-icon-lg' : 'bpk-icon-sm' ]

		alignToButton ? classNames.push(large ? 'bpk-icon-lg--align-to-button' : 'bpk-icon-sm--align-to-button') : null
		props.alignToButton ? classNames.push(props.large ? 'bpk-icon-lg--align-to-button' : 'bpk-icon-sm--align-to-button') : null

		@@ -26,0 +26,0 @@ return <span className={classNames.join(' ')} dangerouslySetInnerHTML={{ __html }} />

New alerts