Skip to content

Commit

Permalink
chore(icons): remove outdated developing with carbon section (#1317)
Browse files Browse the repository at this point in the history
  • Loading branch information
joshblack authored Jul 13, 2020
1 parent 99dc2d2 commit 95b7504
Showing 1 changed file with 0 additions and 51 deletions.
51 changes: 0 additions & 51 deletions src/pages/guidelines/icons/usage.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -132,54 +132,3 @@ When used next to text, icons should be center-aligned.

</DoDont>
</DoDontRow>

## Developing with icons

### SVG Icons

#### Requirements:

Install `carbon-icons`.

Full installation details can be found in the Carbon icons [GitHub repo](https://github.com/carbon-design-system/carbon-icons).

### Main files

`carbon-icons` ships with two main SVG files:

| Filename | Description | Supported versions |
| ------------------- | ------------------------------------------------------------------------------------------------------- | ------------------ |
| _carbon-icons.svg_ | Contains current icons (consolidated subset of legacy icons used in IBM Bluemix) | `3.x` & newer |
| _carbon-icons.json_ | JSON file created from carbon-icons.svg, used in [Carbon](/guidelines/iconography/library) | `3.x` & newer |
| _carbon-icons.js_ | JS module created from carbon-icons.svg, used in `Icon` React Component in [carbon-components-react](#) | `3.x` & newer |
| _icons.json_ | legacy JSON file created from sprite.svg | `1.x`,`2.x`&`3.x` |
| _legacy-icons.js_ | JS module created from sprite.svg | `3.x` only |

### Accessibility

For screen reader accessibility, provide a context-rich title for the SVG using `<title>` element.

```html
<svg>
<title>Add a new service</title>
<use xlink:href="/carbon-icons/dist/icon--add--glyph"></use>
</svg>
```

If support for older browsers is needed, use the `aria-labelledby` attribute to reference the `<title>` element using an `id`.

The `<title>` element will be read by the screen reader to the user, so it should describe its purpose.

Make sure that you do not duplicate this `id`.

```html
<svg aria-labelledby="add">
<title id="add">Add a new service</title>
<use xlink:href="/carbon-icons/dist/icon--add"></use>
</svg>
```

<Title> For more details on accessibility, see the following resources: </Title>

- "Accessible SVGs" via [CSS-Tricks](https://css-tricks.com/accessible-svgs/)
- "5.4 The 'desc' and 'title' elements" via [W3C.org](https://www.w3.org/TR/SVG11/struct.html#DescriptionAndTitleElements)

1 comment on commit 95b7504

@vercel
Copy link

@vercel vercel bot commented on 95b7504 Jul 13, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.