@carbon/icon-helpers 10.1.1 → 10.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +2 -2
- package/README.md +22 -24
- package/package.json +3 -3
package/LICENSE
CHANGED
|
@@ -178,7 +178,7 @@
|
|
|
178
178
|
APPENDIX: How to apply the Apache License to your work.
|
|
179
179
|
|
|
180
180
|
To apply the Apache License to your work, attach the following
|
|
181
|
-
boilerplate notice, with the fields enclosed by brackets "
|
|
181
|
+
boilerplate notice, with the fields enclosed by brackets "{}"
|
|
182
182
|
replaced with your own identifying information. (Don't include
|
|
183
183
|
the brackets!) The text should be enclosed in the appropriate
|
|
184
184
|
comment syntax for the file format. We also recommend that a
|
|
@@ -186,7 +186,7 @@
|
|
|
186
186
|
same "printed page" as the copyright notice for easier
|
|
187
187
|
identification within third-party archives.
|
|
188
188
|
|
|
189
|
-
Copyright
|
|
189
|
+
Copyright 2015 IBM Corp.
|
|
190
190
|
|
|
191
191
|
Licensed under the Apache License, Version 2.0 (the "License");
|
|
192
192
|
you may not use this file except in compliance with the License.
|
package/README.md
CHANGED
|
@@ -1,19 +1,19 @@
|
|
|
1
1
|
# @carbon/icon-helpers
|
|
2
2
|
|
|
3
|
-
> Helpers used alongside icons for digital and software products using
|
|
4
|
-
>
|
|
3
|
+
> Helpers used alongside icons for digital and software products using the
|
|
4
|
+
> Carbon Design System
|
|
5
5
|
|
|
6
6
|
## Getting started
|
|
7
7
|
|
|
8
|
-
To install `@carbon/icon-helpers` in your project, you will need to
|
|
9
|
-
|
|
8
|
+
To install `@carbon/icon-helpers` in your project, you will need to run the
|
|
9
|
+
following command using [npm](https://www.npmjs.com/):
|
|
10
10
|
|
|
11
11
|
```bash
|
|
12
12
|
npm install -S @carbon/icon-helpers
|
|
13
13
|
```
|
|
14
14
|
|
|
15
|
-
If you prefer [Yarn](https://yarnpkg.com/en/), use the following
|
|
16
|
-
|
|
15
|
+
If you prefer [Yarn](https://yarnpkg.com/en/), use the following command
|
|
16
|
+
instead:
|
|
17
17
|
|
|
18
18
|
```bash
|
|
19
19
|
yarn add @carbon/icon-helpers
|
|
@@ -21,8 +21,9 @@ yarn add @carbon/icon-helpers
|
|
|
21
21
|
|
|
22
22
|
## Usage
|
|
23
23
|
|
|
24
|
-
`@carbon/icon-helpers` provides a couple of helpers for rendering `<svg>` nodes
|
|
25
|
-
set on an `<svg>` node.
|
|
24
|
+
`@carbon/icon-helpers` provides a couple of helpers for rendering `<svg>` nodes
|
|
25
|
+
in a document, or to help get the correct attributes to set on an `<svg>` node.
|
|
26
|
+
These include:
|
|
26
27
|
|
|
27
28
|
| Name | Type | Description |
|
|
28
29
|
| ------------------ | --------------------------------- | ---------------------------------------------------------------------------- |
|
|
@@ -31,19 +32,18 @@ set on an `<svg>` node. These include:
|
|
|
31
32
|
| `toString` | `(descriptor: Object) => String` | Format the given icon descriptor into a string. Useful for templates |
|
|
32
33
|
| `toSVG` | `(descriptor: Object) => DOMNode` | Format the given icon descriptor into a DOM node |
|
|
33
34
|
|
|
34
|
-
For most of the methods, `attributes` corresponds with whatever the
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
following:
|
|
35
|
+
For most of the methods, `attributes` corresponds with whatever the name and
|
|
36
|
+
value would be if you were writing the HTML for the `<svg>`. For example, if we
|
|
37
|
+
wanted to set `width` and `height` we would do the following:
|
|
38
38
|
|
|
39
39
|
```js
|
|
40
40
|
const { getAttributes } = require('@carbon/icon-helpers');
|
|
41
41
|
const attributes = getAttributes({ width: 20, height: 20 });
|
|
42
42
|
```
|
|
43
43
|
|
|
44
|
-
In order for the icon to be considered focusable, you will need to
|
|
45
|
-
|
|
46
|
-
|
|
44
|
+
In order for the icon to be considered focusable, you will need to provide
|
|
45
|
+
either `aria-label`, `aria-labelledby`, or `title` in the given `attributes` in
|
|
46
|
+
addition to `tabindex`. For example:
|
|
47
47
|
|
|
48
48
|
```js
|
|
49
49
|
const { getAttributes } = require('@carbon/icon-helpers');
|
|
@@ -55,9 +55,8 @@ const attributes = getAttributes({
|
|
|
55
55
|
|
|
56
56
|
### Icon descriptors
|
|
57
57
|
|
|
58
|
-
An icon descriptor is the term we use to describe icon objects
|
|
59
|
-
|
|
60
|
-
shape:
|
|
58
|
+
An icon descriptor is the term we use to describe icon objects exported by
|
|
59
|
+
`@carbon/icons`. By default, they will have the following shape:
|
|
61
60
|
|
|
62
61
|
```js
|
|
63
62
|
{
|
|
@@ -81,8 +80,8 @@ shape:
|
|
|
81
80
|
}
|
|
82
81
|
```
|
|
83
82
|
|
|
84
|
-
You can import these definitions directly from `@carbon/icons` and use
|
|
85
|
-
|
|
83
|
+
You can import these definitions directly from `@carbon/icons` and use them
|
|
84
|
+
alongside `toSVG` or `toString` by doing:
|
|
86
85
|
|
|
87
86
|
```js
|
|
88
87
|
import { IconName } from '@carbon/icons';
|
|
@@ -100,10 +99,9 @@ const iconSVG = toSVG({
|
|
|
100
99
|
|
|
101
100
|
## 🙌 Contributing
|
|
102
101
|
|
|
103
|
-
We're always looking for contributors to help us fix bugs, build new
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
! 👀
|
|
102
|
+
We're always looking for contributors to help us fix bugs, build new features,
|
|
103
|
+
or help us improve the project documentation. If you're interested, definitely
|
|
104
|
+
check out our [Contributing Guide](/.github/CONTRIBUTING.md) ! 👀
|
|
107
105
|
|
|
108
106
|
## 📝 License
|
|
109
107
|
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@carbon/icon-helpers",
|
|
3
3
|
"description": "Helpers used alongside icons for digital and software products using the Carbon Design System",
|
|
4
|
-
"version": "10.
|
|
4
|
+
"version": "10.2.0",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"main": "lib/index.js",
|
|
7
7
|
"module": "es/index.js",
|
|
@@ -27,9 +27,9 @@
|
|
|
27
27
|
"clean": "rimraf es lib umd"
|
|
28
28
|
},
|
|
29
29
|
"devDependencies": {
|
|
30
|
-
"@carbon/bundler": "10.
|
|
30
|
+
"@carbon/bundler": "10.2.0",
|
|
31
31
|
"rimraf": "^2.6.2"
|
|
32
32
|
},
|
|
33
33
|
"sideEffects": false,
|
|
34
|
-
"gitHead": "
|
|
34
|
+
"gitHead": "e71825a0cf44f6f41fee7d2b0dd9c57d7bda126a"
|
|
35
35
|
}
|