Skip to content

Latest commit

 

History

History
102 lines (72 loc) · 3.89 KB

usage.md

File metadata and controls

102 lines (72 loc) · 3.89 KB
Raw

Usage

Inline SVG (recommended)

We recommend inlining SVG when possible since it's a best practice. Overall, this is the simplest way for using SVG in your HTML documents.

Production-ready SVG files are available in the dist folder, which have been optimized with SVGO.

Note that SVG files in dist folder only include most current icons reflected in carbon-design-system website.

Using SVG sprite

Requirements:

  • svgxuse polyfill
  • Serve carbon-icons.svg as a static asset
  • Use carbon-icons.svg from same origin to avoid CORS issues.

Using SVG sprite from static assets (recommended)

Install carbon-icons and svgxuse so you can use carbon-icons.svg and svgxuse.js.

npm i carbon-icons svgxuse

Use the SVG sprite (carbon-icons.svg) by serving it as a static asset. Note that the use of external svg content via <use> and xlink:href is only compatible when using svgxuse.js polyfill.

Move the carbon-icons.svg and svgxuse.js files from node_modules to a folder where you will serve your static assets from. They will be located in node_modules/carbon-icons and node_modules/svgxuse respectively.

svgxuse is also available via CDN at https://unpkg.com/svgxuse@1.2.4/svgxuse.js

server.js (express)

const express = require('express');
const app = express();

// static assets are served from a folder named dist
app.use(express.static('dist'));

...

index.html

...
<body>
  ...
  <svg>
    <title>Add new users to your account</title>
    <use xlink:href="/carbon-icons.svg#icon--add--glyph"></use>
  </svg>
  ...
  <script src="/svgxuse.js" defer></script>
</body>

You can do a simple copy and paste, setup an automated task to move the files out of node_modules or do whatever is the best fit for your project.

CSS overrides

You can override how an SVG icon looks using CSS.

<svg class="icon">
  <use xlink:href="/carbon-icons.svg#icon--add--glyph"></use>
</svg>
.icon {
  width: 24px;
  height: 24px;
  fill: red;
}

All icons in the library are standarized so that they do not include stroke or internal spacing (padding).

Main files

filename description supported versions
carbon-icons.svg Contains current icons (consolidated subset of legacy icons intended for use on Bluemix) 3.x and newer
carbon-icons.json JSON file created from carbon-icons.svg, used on carbon-design-system website 3.x and newer
carbon-icons.js JS module created from carbon-icons.svg, used in Icon React Component in bluemix-components-react (React repo is for IBMers only for now) 3.x and newer

Accessibility

For screen reader accessibility, use <title> element.

<svg class="icon">
  <title>Add a new service</title>
  <use xlink:href="/carbon-icons.svg#icon--add--glyph"></use>
</svg>
  • The <title> element describes the SVG and what it's used for. Make this as detailed as possible for screen-readers and overall accessibility.