Octicons v2

docs/content/CircleBadge.md

@@ -9,7 +9,7 @@ Use CircleBadge to visually connect logos of third party services like in market
 
 ```jsx live
 <CircleBadge>
-  <CircleBadge.Icon icon={Zap} />
+  <CircleBadge.Icon icon={CheckIcon} />
 </CircleBadge>
 ```
 

docs/content/CircleOcticon.md

@@ -8,7 +8,7 @@ CircleOcticon renders any Octicon with a circle background. CircleOcticons are m
 ## Default example
 
 ```jsx live
-  <CircleOcticon icon={Check} size={32} bg="green.5" color="white"/>
+  <CircleOcticon icon={CheckIcon} size={32} bg="green.5" color="white"/>
 ```
 
 ## System props

docs/content/Dialog.md

@@ -33,7 +33,7 @@ You can also pass any non-text content into the header:
       <Button onClick={() => setIsOpen(true)}>Open</Button>
       <Dialog isOpen={isOpen} onDismiss={() => setIsOpen(false)}>
         <Dialog.Header>
-          <Octicon icon={Zap} />
+          <AlertIcon />
         </Dialog.Header>
         <Box p={3}>
           <Text fontFamily="sans-serif">Some content</Text>

docs/content/FilteredSearch.md

@@ -17,7 +17,7 @@ The FilteredSearch component helps style a Dropdown and a TextInput side-by-side
       <Dropdown.Item>Item 3</Dropdown.Item>
     </Dropdown.Menu>
   </Dropdown>
-  <TextInput icon={Search} />
+  <TextInput icon={SearchIcon} />
 </FilteredSearch>
 ```
 

docs/content/Flash.md

@@ -19,7 +19,7 @@ Flash components with icons inside of them will automatically set the correct co
 
 ```jsx live
 <Flash variant="success">
-  <StyledOcticon icon={Check}/>
+  <CheckIcon />
   Success!
 </Flash>
 ```
@@ -30,7 +30,7 @@ Flash components get `COMMON` system props. Read our [System Props](/system-prop
 
 ## Component props
 
-| Name | Type | Default | Description |
-| :- | :- | :-: | :- |
-| full | Boolean | | Creates a full width Flash component|
-| variant | String | default | Can be one of `default`, `success`, `warning`, or `danger` - sets the background color and border of the Flash component |
+| Name    | Type    | Default | Description                                                                                                              |
+| :------ | :------ | :-----: | :----------------------------------------------------------------------------------------------------------------------- |
+| full    | Boolean |         | Creates a full width Flash component                                                                                     |
+| variant | String  | default | Can be one of `default`, `success`, `warning`, or `danger` - sets the background color and border of the Flash component |

docs/content/SideNav.md

@@ -35,31 +35,29 @@ Add the `variant='full'` prop to a `SideNav.Link` to spread child elements acros
     <Text>Text Only</Text>
   </SideNav.Link>
   <SideNav.Link href="#url">
-    <Avatar
-      size={16}
-      mr={2}
-      src="https://avatars.githubusercontent.com/hubot?s=32"
-    />
+    <Avatar size={16} mr={2} src="https://avatars.githubusercontent.com/hubot?s=32" />
     <Text>With an avatar</Text>
   </SideNav.Link>
   <SideNav.Link href="#url">
-    <StyledOcticon mr={2} size={16} icon={Zap} />
+    <HomeIcon mr={2} />
     <Text>With an Octicon</Text>
   </SideNav.Link>
   <SideNav.Link href="#url" variant="full" selected>
     <Text>With a status icon</Text>
-    <StyledOcticon mr={2} size={16} icon={PrimitiveDot} color="green.5" />
+    <DotFillIcon color="green.5" />
   </SideNav.Link>
   <SideNav.Link href="#url" variant="full">
     <Text>With a label</Text>
-    <Label bg='blue.5'>label</Label>
+    <Label bg="blue.5">label</Label>
   </SideNav.Link>
   <SideNav.Link href="#url" variant="full">
     <Text>With a counter</Text>
     <CounterLabel>16</CounterLabel>
   </SideNav.Link>
   <SideNav.Link href="#url">
-    <Heading as="h5" fontSize={1}>A heading</Heading>
+    <Heading as="h5" fontSize={1}>
+      A heading
+    </Heading>
     <Text>and some more content</Text>
   </SideNav.Link>
 </SideNav>
@@ -70,9 +68,11 @@ Add the `variant='full'` prop to a `SideNav.Link` to spread child elements acros
 Add the `variant="lightweight"` prop to `SideNav` to render an alternative, more lightweight version that has items with no borders and are more condensed.
 
 ```jsx live
-<BorderBox p={3} backgroundColor='gray.0' maxWidth={360}>
+<BorderBox p={3} backgroundColor="gray.0" maxWidth={360}>
   <BorderBox borderWidth={0} borderBottomWidth={1} borderRadius={0} mb={2} pb={1}>
-    <Heading as="h5" fontSize={1} color="gray.7">Menu</Heading>
+    <Heading as="h5" fontSize={1} color="gray.7">
+      Menu
+    </Heading>
   </BorderBox>
   <SideNav variant="lightweight">
     <SideNav.Link href="#url">
@@ -96,11 +96,11 @@ It can also appear nested, as a sub navigation. Use margin/padding [System Props
 ```jsx live
 <SideNav bordered maxWidth={360}>
   <SideNav.Link href="#url">
-    <StyledOcticon mr={2} size={16} icon={Person} />
+    <PersonIcon mr={2} />
     <Text>Account</Text>
   </SideNav.Link>
   <SideNav.Link href="#url" selected>
-    <StyledOcticon mr={2} size={16} icon={Octoface} />
+    <FlameIcon mr={2} />
     <Text>Profile</Text>
   </SideNav.Link>
 
@@ -117,7 +117,7 @@ It can also appear nested, as a sub navigation. Use margin/padding [System Props
   </SideNav>
 
   <SideNav.Link href="#url">
-    <StyledOcticon mr={2} size={16} icon={Mail} />
+    <MailIcon mr={2} />
     <Text>Emails</Text>
   </SideNav.Link>
 </SideNav>
@@ -139,19 +139,19 @@ If using React Router, you can use the `as` prop to render the element as a `Nav
 
 ### SideNav
 
-| Name | Type | Default | Description |
-| :- | :- | :-: | :- |
-| as | String | 'nav' | Sets the HTML tag for the component. |
-| bordered | Boolean | false | Renders the component with a border. |
-| variant | String | 'normal' | Set to `lightweight` to render [in a lightweight style](#lightweight-variant). |
+| Name     | Type    | Default  | Description                                                                    |
+| :------- | :------ | :------: | :----------------------------------------------------------------------------- |
+| as       | String  |  'nav'   | Sets the HTML tag for the component.                                           |
+| bordered | Boolean |  false   | Renders the component with a border.                                           |
+| variant  | String  | 'normal' | Set to `lightweight` to render [in a lightweight style](#lightweight-variant). |
 
 ### SideNav.Link
 
-| Name | Type | Default | Description |
-| :- | :- | :-: | :- |
-| as | String | 'a' | Sets the HTML tag for the component. |
-| href      | String  |         | URL to be used for the Link                       |
-| muted     | Boolean |  false  | Uses light gray for Link color, and blue on hover |
-| selected | Boolean | false | Sets the link as selected, giving it a different style and setting the `aria-current` attribute. |
-| underline | Boolean |  false  | Adds underline to the Link                        |
-| variant | String | 'normal' | Set to `full` to render [a full variant](#full-variant), suitable for including icons and labels. |
+| Name      | Type    | Default  | Description                                                                                       |
+| :-------- | :------ | :------: | :------------------------------------------------------------------------------------------------ |
+| as        | String  |   'a'    | Sets the HTML tag for the component.                                                              |
+| href      | String  |          | URL to be used for the Link                                                                       |
+| muted     | Boolean |  false   | Uses light gray for Link color, and blue on hover                                                 |
+| selected  | Boolean |  false   | Sets the link as selected, giving it a different style and setting the `aria-current` attribute.  |
+| underline | Boolean |  false   | Adds underline to the Link                                                                        |
+| variant   | String  | 'normal' | Set to `full` to render [a full variant](#full-variant), suitable for including icons and labels. |

docs/content/SubNav.md

@@ -37,7 +37,7 @@ This ensures that the NavLink gets `activeClassName='selected'`
     <SubNav.Link href="#support">Support</SubNav.Link>
   </SubNav.Links>
 
-  <TextInput type="search" icon={Search} width={320} />
+  <TextInput type="search" icon={SearchIcon} width={320} />
 </SubNav>
 ```
 
@@ -59,7 +59,7 @@ This ensures that the NavLink gets `activeClassName='selected'`
         </Dropdown.Item>
       </Dropdown.Menu>
     </Dropdown>
-    <TextInput type="search" icon={Search} width={320} />
+    <TextInput type="search" icon={SearchIcon} width={320} />
   </FilteredSearch>
   <SubNav.Links>
     <SubNav.Link href="#home" selected>

docs/content/TextInput.md

@@ -10,7 +10,7 @@ TextInput is a form component to add default styling to the native text input.
 ```jsx live
 <TextInput aria-label="Zipcode" name="zipcode" placeholder="Zipcode" autoComplete="postal-code" />
 
-<TextInput ml={4} icon={Search} aria-label="Zipcode" name="zipcode" placeholder="Find user" autoComplete="postal-code" />
+<TextInput ml={4} icon={SearchIcon} aria-label="Zipcode" name="zipcode" placeholder="Find user" autoComplete="postal-code" />
 ```
 
 ## System props

docs/content/Timeline.md

@@ -10,7 +10,7 @@ The Timeline.Item component is used to display items on a vertical timeline, con
 <Timeline>
   <Timeline.Item>
     <Timeline.Badge>
-      <StyledOcticon icon={Flame} />
+      <FlameIcon />
     </Timeline.Badge>
     <Timeline.Body>
       <Link href="#" fontWeight="bold" color="gray.8" mr={1} muted>
@@ -35,7 +35,7 @@ The default Timeline.Badge color is dark text on a light grey background.
 <Timeline>
   <Timeline.Item>
     <Timeline.Badge>
-      <StyledOcticon icon={Flame} />
+      <FlameIcon />
     </Timeline.Badge>
     <Timeline.Body>Default badge color</Timeline.Body>
   </Timeline.Item>
@@ -44,32 +44,31 @@ The default Timeline.Badge color is dark text on a light grey background.
 
 ## Adding color to a Badge
 
-To have color variants, use the `bg` prop on the `Timeline.Badge`. If an icon is being used, set the `color` prop
-of the child `StyledOcticon` if necessary.
+To have color variants, use the `bg` prop on the `Timeline.Badge`. If an icon is being used, set the `color` prop of the icon if necessary.
 
 ```jsx live
 <Timeline>
   <Timeline.Item>
     <Timeline.Badge bg="red.5">
-      <StyledOcticon icon={Flame} color="white" />
+      <FlameIcon color="white" />
     </Timeline.Badge>
     <Timeline.Body>Red background used when closed events occur</Timeline.Body>
   </Timeline.Item>
   <Timeline.Item>
     <Timeline.Badge bg="green.5">
-      <StyledOcticon icon={Flame} color="white" />
+      <FlameIcon color="white" />
     </Timeline.Badge>
     <Timeline.Body>Green background when opened or passed events occur</Timeline.Body>
   </Timeline.Item>
   <Timeline.Item>
     <Timeline.Badge bg="purple.5">
-      <StyledOcticon icon={Flame} color="white" />
+      <FlameIcon color="white" />
     </Timeline.Badge>
     <Timeline.Body>Purple background used when pull requests are merged</Timeline.Body>
   </Timeline.Item>
   <Timeline.Item>
     <Timeline.Badge bg="blue.5">
-      <StyledOcticon icon={Flame} color="white" />
+      <FlameIcon color="white" />
     </Timeline.Badge>
     <Timeline.Body>Blue background to indicate new events below</Timeline.Body>
   </Timeline.Item>
@@ -84,13 +83,13 @@ Timeline has a condensed prop that will reduce the vertical padding and remove t
 <Timeline>
   <Timeline.Item condensed>
     <Timeline.Badge>
-      <StyledOcticon icon={GitCommit} />
+      <GitCommitIcon />
     </Timeline.Badge>
     <Timeline.Body>This is the message of a condensed TimelineItem</Timeline.Body>
   </Timeline.Item>
   <Timeline.Item condensed>
     <Timeline.Badge>
-      <StyledOcticon icon={GitCommit} />
+      <GitCommitIcon />
     </Timeline.Badge>
     <Timeline.Body>This is the message of a condensed TimelineItem</Timeline.Body>
   </Timeline.Item>
@@ -105,14 +104,14 @@ To create a visual break in the timeline, use Timeline.Break. This adds a horizo
 <Timeline>
   <Timeline.Item>
     <Timeline.Badge bg="red.5">
-      <StyledOcticon icon={Flame} color="white" />
+      <FlameIcon color="white" />
     </Timeline.Badge>
     <Timeline.Body>Red background used when closed events occur</Timeline.Body>
   </Timeline.Item>
   <Timeline.Break />
   <Timeline.Item>
     <Timeline.Badge bg="green.5">
-      <StyledOcticon icon={Flame} color="white" />
+      <FlameIcon color="white" />
     </Timeline.Badge>
     <Timeline.Body>Green background when opened or passed events occur</Timeline.Body>
   </Timeline.Item>

docs/content/getting-started.md

@@ -8,10 +8,10 @@ To get started using Primer React, install the package and its peer dependencies
 
 ```bash
 # with npm
-npm install @primer/components react react-dom styled-components
+npm install @primer/components react react-dom styled-components @primer/styled-octicons
 
 # with yarn
-yarn add @primer/components react react-dom styled-components
+yarn add @primer/components react react-dom styled-components @primer/styled-octicons
 ```
 
 You can now import Primer React from the main package module:
@@ -49,6 +49,22 @@ Primer React requires the following libraries to be installed along with it:
 - `styled-components` at version 4.0.0 or higher
 - `react` at versions 16.8.0 or higher
 - `react-dom` at versions 16.8.0 or higher
+- `@primer/styled-octicons` at versions 10.0.0 or higher
+
+### Using Octicons with Primer React Components
+We use the `@primer/styled-octicons` package for Octicons in the Primer React Components library.
+
+In order to avoid version mismatches, `@primer/styled-octicons` is set as a peer dependency. This allows you to decide which version of `@primer/styled-octicons` you'd like to use in your project and makes sure that any Octicons used in other parts of your application match the icons used in Primer React Components.
+
+As mentioned in the previous section on [Peer dependencies](#Peer-dependencies), you'll need to install `@primer/styled-octicons` before getting started with Primer React Components, regardless of whether or not you are using `@primer/styled-octicons` directly. `@primer/styled-octicons` and `@primer/components` are both tree-shaking friendly, so you shouldn't need to worry about dependency bloat.
+
+You can reference the [`@primer/styled-octicons documentation](https://primer.style/octicons/packages/styled-system) for more detail on how to use these components, but in general the `@primer/styled-octicons` components work similar any Primer React component:
+
+```jsx live
+ <AlertIcon color="red.6" mr={2} />
+```
+
+`@primer/styled-octicons` components have access to all [`COMMON`](https://primer.style/components/system-props#system-prop-categories) system props as well as the [`sx`](https://primer.style/components/overriding-styles) prop.
 
 ## BaseStyles
 

docs/package.json

@@ -11,8 +11,8 @@
     "node": ">= 10.x"
   },
   "dependencies": {
-    "@primer/gatsby-theme-doctocat": "^0.20.0",
-    "@primer/octicons-react": "^9.2.0",
+    "@primer/gatsby-theme-doctocat": "0.21.0",
+    "@primer/styled-octicons": "^10.0.0",
     "@styled-system/prop-types": "^5.1.0",
     "@styled-system/theme-get": "^5.1.0",
     "gatsby": "^2.17.0",

docs/src/@primer/gatsby-theme-doctocat/components/layout.js

@@ -1,13 +1,13 @@
-import {BorderBox, Box, Flex, Grid, Heading, Position, Text, Details, StyledOcticon} from '@primer/components'
-import {ChevronDown, ChevronRight} from '@primer/octicons-react'
-import React from 'react'
+import {BorderBox, Box, Details, Flex, Grid, Heading, Position, Text} from '@primer/components'
 import Head from '@primer/gatsby-theme-doctocat/src/components/head'
 import Header, {HEADER_HEIGHT} from '@primer/gatsby-theme-doctocat/src/components/header'
 import PageFooter from '@primer/gatsby-theme-doctocat/src/components/page-footer'
 import Sidebar from '@primer/gatsby-theme-doctocat/src/components/sidebar'
 import SourceLink from '@primer/gatsby-theme-doctocat/src/components/source-link'
 import StatusLabel from '@primer/gatsby-theme-doctocat/src/components/status-label'
 import TableOfContents from '@primer/gatsby-theme-doctocat/src/components/table-of-contents'
+import {ChevronDownIcon, ChevronRightIcon} from '@primer/styled-octicons'
+import React from 'react'
 
 function Layout({children, pageContext}) {
   const {title, description, status, source, additionalContributors = []} = pageContext.frontmatter
@@ -62,7 +62,7 @@ function Layout({children, pageContext}) {
                   {({open}) => (
                     <>
                       <Text as="summary" fontWeight="bold">
-                        <StyledOcticon icon={open ? ChevronDown : ChevronRight} mr={2} />
+                        {open ? <ChevronDownIcon mr={2} /> : <ChevronRightIcon mr={2} />}
                         Table of contents
                       </Text>
                       <Box pt={1}>