@cloudflare/component-icon - npm Package Compare versions

Comparing version 2.3.1 to 2.3.2

CHANGELOG.md

@@ -6,2 +6,10 @@ # Change Log
 
+      <a name="2.3.2"></a>
+## [2.3.2](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/component-icon@2.3.1...@cloudflare/component-icon@2.3.2) (2019-01-18)
+
+
+
+
+**Note:** Version bump only for package @cloudflare/component-icon
+
       <a name="2.3.1"></a>
@@ -15,3 +23,3 @@ ## [2.3.1](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/component-icon@2.3.0...@cloudflare/component-icon@2.3.1) (2019-01-04)
 
-      <a name="2.3.0"></a>
+    <a name="2.3.0"></a>
 # [2.3.0](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/component-icon@2.2.7...@cloudflare/component-icon@2.3.0) (2018-12-21)
@@ -27,3 +35,3 @@
 
-    <a name="2.2.7"></a>
+  <a name="2.2.7"></a>
 ## [2.2.7](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/component-icon@2.2.6...@cloudflare/component-icon@2.2.7) (2018-12-15)
@@ -36,3 +44,3 @@
 
-  <a name="2.2.6"></a>
+<a name="2.2.6"></a>
 ## [2.2.6](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/component-icon@2.2.5...@cloudflare/component-icon@2.2.6) (2018-12-14)
@@ -39,0 +47,0 @@

package.json

 {
   "name": "@cloudflare/component-icon",
   "description": "Cloudflare Icon Component",
-  "version": "2.3.1",
+  "version": "2.3.2",
   "main": "lib/index.js",
@@ -6,0 +6,0 @@ "module": "es/index.js",

README.md

@@ -6,7 +6,8 @@ # @cloudflare/component-icon
 ## Installation
-
 Installation with yarn is recommended
 
 ```sh
+
 $ yarn add @cloudflare/component-icon
+
 ```
@@ -19,2 +20,3 @@
 import { Icon } from '../../src';
+import iconTypes from '../../src/iconTypes';
 
@@ -46,57 +48,10 @@ import { createComponent } from '@cloudflare/style-container';
     <p>Types:</p>
-    <p>
-      <Icon label="caret-down" type="caret-down" />
-      <Icon label="caret-left" type="caret-left" />
-      <Icon label="caret-right" type="caret-right" />
-      <Icon label="caret-up" type="caret-up" />
-      <Icon label="resize-horizontal" type="resize-horizontal" />
-      <Icon label="reorder" type="reorder" />
-      <Icon label="forward" type="forward" />
-      <Icon label="backward" type="backward" />
-      <Icon label="left" type="left" />
-      <Icon label="right" type="right" />
-      <Icon label="collapse" type="collapse" />
-      <Icon label="edgeworker" type="edgeworker" />
-      <Icon label="expand" type="expand" />
-      <Icon label="retarget" type="retarget" />
-      <Icon label="linkedin" type="linkedin" />
-      <Icon label="twitter" type="twitter" />
-      <Icon label="google-plus" type="google-plus" />
-      <Icon label="facebook" type="facebook" />
-      <Icon label="filter" type="filter" />
-      <Icon label="calendar" type="calendar" />
-      <Icon label="file" type="file" />
-      <Icon label="clipboard" type="clipboard" />
-      <Icon label="drive" type="drive" />
-      <Icon label="speech" type="speech" />
-      <Icon label="flowchart" type="flowchart" />
-      <Icon label="flowchart-alt" type="flowchart-alt" />
-      <Icon label="hamburger" type="hamburger" />
-      <Icon label="list" type="list" />
-      <Icon label="gear" type="gear" />
-      <Icon label="chart" type="chart" />
-      <Icon label="help" type="help" />
-      <Icon label="info-sign" type="info-sign" />
-      <Icon label="ok-sign" type="ok-sign" />
-      <Icon label="exclamation-sign" type="exclamation-sign" />
-      <Icon label="refresh" type="refresh" />
-      <Icon label="time" type="time" />
-      <Icon label="sad" type="sad" />
-      <Icon label="happy" type="happy" />
-      <Icon label="minus" type="minus" />
-      <Icon label="ok" type="ok" />
-      <Icon label="pause" type="pause" />
-      <Icon label="plus" type="plus" />
-      <Icon label="remove" type="remove" />
-      <Icon label="search" type="search" />
-      <Icon label="lock" type="lock" />
-      <Icon label="shield" type="shield" />
-      <Icon label="spectrum" type="spectrum" />
-      <Icon label="upload" type="upload" />
-      <Icon label="wrench" type="wrench" />
-      <Icon label="bolt" type="bolt" />
-      <Icon label="user" type="user" />
-      <Icon label="stream" type="stream" />
-      <Icon label="add" type="add" />
-    </p>
+    <Icons>
+      {iconTypes.map(iconType => (
+        <IconWrapper key={iconType}>
+          <Icon label={iconType} type={iconType} size="3x" />
+          <pre>{iconType}</pre>
+        </IconWrapper>
+      ))}
+    </Icons>
 
@@ -139,3 +94,38 @@ <p>Sizes:</p>
 
+const gutterSize = '0.5em';
+const Icons = createComponent(() => ({
+  display: 'grid',
+  gridTemplateColumns: 'repeat(auto-fill, minmax(8rem, 1fr))',
+  gridAutoRows: '1fr',
+  margin: `0 -${gutterSize}`,
+  '&::before': {
+    content: `''`,
+    width: '0',
+    paddingBottom: '100%',
+    gridRow: '1 / 1',
+    gridColumn: '1 / 1'
+  }
+}));
+
+const IconWrapper = createComponent(({ theme }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  margin: gutterSize,
+  background: theme.colors.gray[9],
+  '& svg': {
+    flex: 1,
+    marginTop: '1.5em'
+  },
+  '&:first-child': {
+    gridRow: '1 / 1',
+    gridColumn: '1 / 1'
+  }
+}));
+
 export default IconComponent;
+
 ```
+
+

No alert changes

Worsened metrics

Total package byte prevSize

242726

decreased by-0.52%

Number of lines in readme file

128

decreased by-7.25%

No dependency changes