@justeattakeaway/pie-icons-webc 1.11.0 → 1.11.1
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/README.md +38 -12
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,26 +1,52 @@
|
|
|
1
|
+
# @justeattakeaway/pie-icons-webc
|
|
2
|
+
[Source Code](https://github.com/justeattakeaway/pie/tree/main/packages/tools/pie-icons-webc) | [Design Documentation](https://pie.design/foundations/iconography/) | [NPM](https://www.npmjs.com/package/@justeattakeaway/pie-icons-webc)
|
|
1
3
|
|
|
2
|
-
|
|
4
|
+
<p>
|
|
5
|
+
<a href="https://www.npmjs.com/@justeattakeaway/pie-icons-webc">
|
|
6
|
+
<img alt="GitHub Workflow Status" src="https://img.shields.io/npm/v/@justeattakeaway/pie-icons-webc.svg">
|
|
7
|
+
</a>
|
|
8
|
+
</p>
|
|
3
9
|
|
|
4
|
-
|
|
10
|
+
`@justeattakeaway/pie-icons-webc` is a Web Component icon library built using the [Lit library](https://lit.dev/docs/).
|
|
5
11
|
|
|
6
12
|
This package provides the PIE icon set as importable web components, to make sure that icons are used in accordance with PIE sizing guidelines.
|
|
7
13
|
|
|
8
14
|
This package takes the icon SVGs from the [pie-icons](https://www.npmjs.com/package/@justeattakeaway/pie-icons) package and compiles them into Lit web components which can be imported into any web application.
|
|
9
15
|
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
[
|
|
13
|
-
|
|
14
|
-
|
|
16
|
+
## Table of Contents
|
|
17
|
+
|
|
18
|
+
- [Installation](#installation)
|
|
19
|
+
- [Usage](#usage)
|
|
20
|
+
- [Vanilla JavaScript](#vanilla-javascript)
|
|
21
|
+
- [Importing a single icon](#importing-a-single-icon)
|
|
22
|
+
- [Importing multiple icons](#importing-multiple-icons)
|
|
23
|
+
- [Lit components](#lit-components)
|
|
24
|
+
- [React](#react)
|
|
25
|
+
- [Vue](#vue)
|
|
26
|
+
- [Props](#props)
|
|
27
|
+
- [`size`](#size)
|
|
28
|
+
- [Browser support](#browser-support)
|
|
29
|
+
- [Contributing](#contributing)
|
|
30
|
+
- [Adding new icons](#adding-new-icons)
|
|
31
|
+
- [Building the module](#building-the-module)
|
|
32
|
+
- [Icon library](#icon-library)
|
|
33
|
+
- [Bundling](#bundling)
|
|
15
34
|
|
|
16
35
|
## Installation
|
|
17
36
|
|
|
18
37
|
To add the module to your project:
|
|
19
38
|
|
|
39
|
+
**Using Yarn:**
|
|
40
|
+
|
|
20
41
|
```bash
|
|
21
42
|
yarn add @justeattakeaway/pie-icons-webc
|
|
22
43
|
```
|
|
23
44
|
|
|
45
|
+
**Using NPM:**
|
|
46
|
+
|
|
47
|
+
```bash
|
|
48
|
+
npm install @justeattakeaway/pie-icons-webc
|
|
49
|
+
```
|
|
24
50
|
|
|
25
51
|
## Usage
|
|
26
52
|
|
|
@@ -99,7 +125,7 @@ export class MyAmazingComponent extends LitElement {
|
|
|
99
125
|
|
|
100
126
|
### React
|
|
101
127
|
|
|
102
|
-
Each icon has a separate entrypoint for use in React applications.
|
|
128
|
+
Each icon has a separate entrypoint for use in React applications.
|
|
103
129
|
|
|
104
130
|
```tsx
|
|
105
131
|
import { IconAlertTriangleLarge } from "@justeattakeaway/pie-icons-webc/dist/react/IconAlertTriangleLarge.js";
|
|
@@ -119,7 +145,7 @@ export default function App() {
|
|
|
119
145
|
|
|
120
146
|
Note that you don't need to register the icons as Vue components, because they aren't!
|
|
121
147
|
|
|
122
|
-
```
|
|
148
|
+
```html
|
|
123
149
|
<template>
|
|
124
150
|
<div>
|
|
125
151
|
<icon-alert-triangle-large></icon-alert-triangle-large>
|
|
@@ -142,11 +168,11 @@ Icons are made available in different size variants:
|
|
|
142
168
|
- regular
|
|
143
169
|
- large, when its name has the `Large` suffix
|
|
144
170
|
|
|
145
|
-
A regular icon's default size is `xs` and can use one of the following pre-defined values for `size`: `xs`, `s`, `m`, `l`, `xl`, and `xxl`. You can learn more about regular icon sizes [here](https://www.pie.design/foundations/iconography/#sizes-for-the-small-icon-set).
|
|
171
|
+
A `regular` icon's default size is `xs` and can use one of the following pre-defined values for `size`: `xs`, `s`, `m`, `l`, `xl`, and `xxl`. You can learn more about regular icon sizes [here](https://www.pie.design/foundations/iconography/#sizes-for-the-small-icon-set).
|
|
146
172
|
|
|
147
|
-
A large icon's default (and minimum) `size` is `32`. Values larger than the minimum **must** be multiples of `8`, otherwise the default size will be used. You can learn more about large icon sizes [here](https://www.pie.design/foundations/iconography/#sizes-for-the-large-icon-set).
|
|
173
|
+
A `large` icon's default (and minimum) `size` is `32`. Values larger than the minimum **must** be multiples of `8`, otherwise the default size will be used. You can learn more about large icon sizes [here](https://www.pie.design/foundations/iconography/#sizes-for-the-large-icon-set).
|
|
148
174
|
|
|
149
|
-
Example
|
|
175
|
+
**Example:**
|
|
150
176
|
|
|
151
177
|
```js
|
|
152
178
|
<icon-alert-triangle size="s"></icon-alert-triangle>
|