Merge pull request #552 from primer/release-12.1.0

Release 12.1.0

CHANGELOG.md

@@ -1,6 +1,15 @@
 # Changelog
 
-# 12.0.0
+## 12.1.0
+
+### React
+
+### 💅 Enhancements
+
+- Add icon-specific class names to each icon component https://github.com/primer/octicons/pull/453 @FloEdelmann
+- Add `fill` prop to each icon component  https://github.com/primer/octicons/pull/551 @macno
+
+## 12.0.0
 ### 🚀 New Features
 - `bug` (https://github.com/primer/octicons/pull/543)
 - `multi-select` (https://github.com/primer/octicons/pull/534)

docs/content/packages/react.mdx

@@ -15,6 +15,7 @@ npm install @primer/octicons-react
 ## Usage
 
 ### Icons
+
 The `@primer/octicons-react` module exports individual icons as [named
 exports](https://ponyfoo.com/articles/es6-modules-in-depth#named-exports). This
 allows you to import only the icons that you need without blowing up your
@@ -34,6 +35,7 @@ If you were to compile this example with a tool that supports [tree-shaking][]
 the "zap" and "beaker" icons.
 
 ### Vertical alignment
+
 By default the octicons have `vertical-align: text-bottom;` applied as inline
 styles. You can change the alignment via the `verticalAlign` prop, which can be
 either `middle`, `text-bottom`, `text-top`, or `top`.
@@ -43,13 +45,13 @@ import {RepoIcon} from '@primer/octicons-react'
 
 export default () => (
   <h1>
-    <RepoIcon verticalAlign='middle' /> github/github
+    <RepoIcon verticalAlign="middle" /> github/github
   </h1>
 )
 ```
 
-
 ### `aria-label`
+
 You have the option of adding accessibility information to the icon with the
 [`aria-label` attribute][aria-label] via the `aria-label` prop.
 
@@ -64,25 +66,42 @@ export default () => (
 )
 ```
 
-
 ### Sizes
+
 The `size` prop takes `small`, `medium`, and `large` values that can be used to
 render octicons at standard sizes:
 
-| Prop | Rendered Size |
-| :- | :- |
-| `size='small'` | 16px height by `computed` width |
+| Prop            | Rendered Size                   |
+| :-------------- | :------------------------------ |
+| `size='small'`  | 16px height by `computed` width |
 | `size='medium'` | 32px height by `computed` width |
-| `size='large'` | 64px height by `computed` width |
+| `size='large'`  | 64px height by `computed` width |
 
 ```js
 // Example usage
 import {LogoGithubIcon} from '@primer/octicons-react'
 
 export default () => (
   <h1>
-    <a href='https://github.com'>
-      <LogoGithubIcon size='large' aria-label='GitHub'/>
+    <a href="https://github.com">
+      <LogoGithubIcon size="large" aria-label="GitHub" />
+    </a>
+  </h1>
+)
+```
+
+### Fill
+
+The `fill` prop takes a string value that can be used to set the color of the icon.
+By default, `fill` is set to [`currentColor`](https://css-tricks.com/currentcolor/).
+
+```js
+// Example usage
+import {LogoGithub} from '@primer/octicons-react'
+export default () => (
+  <h1>
+    <a href="https://github.com">
+      <LogoGithubIcon fill="#f00" />
     </a>
   </h1>
 )

lib/octicons_gem/lib/octicons/version.rb

@@ -1,3 +1,3 @@
 module Octicons
-  VERSION = "12.0.0".freeze
+  VERSION = "12.1.0".freeze
 end

lib/octicons_helper/Gemfile

@@ -2,7 +2,7 @@ source "https://rubygems.org"
 
 gemspec
 
-gem "octicons", "12.0.0"
+gem "octicons", "12.1.0"
 gem "rails"
 
 group :development, :test do

lib/octicons_helper/lib/octicons_helper/version.rb

@@ -1,3 +1,3 @@
 module OcticonsHelper
-  VERSION = "12.0.0".freeze
+  VERSION = "12.1.0".freeze
 end

lib/octicons_helper/octicons_helper.gemspec

@@ -13,6 +13,6 @@ Gem::Specification.new do |s|
 
   s.require_paths = ["lib"]
 
-  s.add_dependency "octicons", "12.0.0"
+  s.add_dependency "octicons", "12.1.0"
   s.add_dependency "rails"
 end

lib/octicons_jekyll/Gemfile

@@ -2,7 +2,7 @@ source "https://rubygems.org"
 
 gemspec
 
-gem "octicons", "12.0.0"
+gem "octicons", "12.1.0"
 
 group :development, :test do
   gem "minitest"

lib/octicons_jekyll/jekyll-octicons.gemspec

@@ -14,5 +14,5 @@ Gem::Specification.new do |s|
   s.require_paths = ["lib"]
 
   s.add_dependency "jekyll", ">= 3.6", "< 5.0"
-  s.add_dependency "octicons", "12.0.0"
+  s.add_dependency "octicons", "12.1.0"
 end

lib/octicons_jekyll/lib/jekyll-octicons/version.rb

@@ -3,6 +3,6 @@ module Liquid; class Tag; end; end
 
 module Jekyll
   class Octicons < Liquid::Tag
-    VERSION = "12.0.0".freeze
+    VERSION = "12.1.0".freeze
   end
 end

lib/octicons_node/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/octicons",
-  "version": "12.0.0",
+  "version": "12.1.0",
   "description": "A scalable set of icons handcrafted with <3 by GitHub.",
   "homepage": "https://octicons.github.com",
   "author": "GitHub Inc.",

lib/octicons_react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/octicons-react",
-  "version": "12.0.0",
+  "version": "12.1.0",
   "description": "A scalable set of icons handcrafted with <3 by GitHub.",
   "homepage": "https://octicons.github.com",
   "author": "GitHub, Inc.",

lib/octicons_react/script/build.js

@@ -22,7 +22,7 @@ const icons = Object.entries(octicons)
 }
 
 ${name}.defaultProps = {
-  className: 'octicon',
+  className: 'octicon octicon-${key}',
   size: 16,
   verticalAlign: 'text-bottom'
 }
@@ -64,6 +64,7 @@ type Size = 'small' | 'medium' | 'large'
 interface IconProps {
   'aria-label'?: string
   className?: string
+  fill?: string
   size?: number | Size
   verticalAlign?: 'middle' | 'text-bottom' | 'text-top' | 'top' | 'unset'
 }

lib/octicons_react/src/__tests__/__snapshots__/octicon.js.snap

@@ -3,7 +3,7 @@
 exports[`An icon component matches snapshot 1`] = `
 <svg
   aria-hidden="true"
-  class="octicon"
+  class="octicon octicon-alert"
   fill="currentColor"
   height="16"
   role="img"

lib/octicons_react/src/__tests__/octicon.js

@@ -53,6 +53,11 @@ describe('An icon component', () => {
     expect(container.querySelector('svg')).toHaveAttribute('class', 'foo')
   })
 
+  it('respects the fill prop', () => {
+    const {container} = render(<AlertIcon fill="#f00" />)
+    expect(container.querySelector('svg')).toHaveAttribute('fill', '#f00')
+  })
+
   it('respects the verticalAlign prop', () => {
     const {container} = render(<AlertIcon verticalAlign="middle" />)
     expect(container.querySelector('svg')).toHaveStyle({verticalAlign: 'middle'})

lib/octicons_react/src/get-svg-props.js

@@ -4,7 +4,14 @@ const sizeMap = {
   large: 64
 }
 
-export default function getSvgProps({'aria-label': ariaLabel, className, size, verticalAlign, svgDataByHeight}) {
+export default function getSvgProps({
+  'aria-label': ariaLabel,
+  className,
+  fill = 'currentColor',
+  size,
+  verticalAlign,
+  svgDataByHeight
+}) {
   const height = sizeMap[size] || size
   const naturalHeight = closestNaturalHeight(Object.keys(svgDataByHeight), height)
   const naturalWidth = svgDataByHeight[naturalHeight].width
@@ -19,7 +26,7 @@ export default function getSvgProps({'aria-label': ariaLabel, className, size, v
     viewBox: `0 0 ${naturalWidth} ${naturalHeight}`,
     width,
     height,
-    fill: 'currentColor',
+    fill,
     style: {
       display: 'inline-block',
       userSelect: 'none',

lib/octicons_react/src/index.d.ts

@@ -8,6 +8,7 @@ export interface OcticonProps {
   'aria-label'?: string
   children?: React.ReactElement<any>
   className?: string
+  fill?: string
   icon?: Icon
   size?: number | Size
   verticalAlign?: 'middle' | 'text-bottom' | 'text-top' | 'top' | 'unset'

lib/octicons_styled/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/styled-octicons",
-  "version": "12.0.0",
+  "version": "12.1.0",
   "description": "A scalable set of icons handcrafted with <3 by GitHub.",
   "homepage": "https://octicons.github.com",
   "author": "GitHub, Inc.",

package.json

@@ -1,6 +1,6 @@
 {
   "private": true,
-  "version": "12.0.0",
+  "version": "12.1.0",
   "scripts": {
     "version": "script/version",
     "test": "ava -v tests/*.js",