@digital-ai/dot-illustrations 1.0.30 → 1.0.31
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 +33 -9
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,18 +1,18 @@
|
|
|
1
|
-
# dot-illustrations
|
|
2
|
-
A central place for the design team to keep illustrations and for dev teams to find them.
|
|
1
|
+
# dot-illustrations and integrations
|
|
2
|
+
A central place for the design team to keep illustrations all graphical assets and for dev teams to find them.
|
|
3
3
|
|
|
4
|
-
Files are organized in
|
|
5
|
-
-
|
|
6
|
-
-
|
|
7
|
-
- digitalai
|
|
4
|
+
Files are organized in 2 separate folders
|
|
5
|
+
- illustrations
|
|
6
|
+
- integrations
|
|
8
7
|
|
|
9
|
-
|
|
8
|
+
## Illustrations
|
|
9
|
+
|
|
10
10
|
|
|
11
11
|
|
|
12
12
|
In each one of those, there is a light and dark folder to match the color style if you using a material theme do not forget to update the illustration folder directory light / dark to match the theme of the switch
|
|
13
13
|
|
|
14
14
|
|
|
15
|
-
##
|
|
15
|
+
## Illustrations usage
|
|
16
16
|
|
|
17
17
|
### React Component via `dot-components`
|
|
18
18
|
|
|
@@ -28,7 +28,31 @@ If not using `dot-components` then import `@digital-ai/dot-illustrations` into y
|
|
|
28
28
|
...
|
|
29
29
|
|
|
30
30
|
<span class="dot-illustration">
|
|
31
|
-
<img class="
|
|
31
|
+
<img class="${illustration-ID}"></img>
|
|
32
|
+
</span>
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
## Integrations
|
|
36
|
+
|
|
37
|
+
|
|
38
|
+
|
|
39
|
+
## Integrations usage
|
|
40
|
+
|
|
41
|
+
### React Component via `dot-components` COMING UP SOON
|
|
42
|
+
|
|
43
|
+
(PENDING WIP): If you are already consuming `dot-components` then the easiest way would be to use the `DotIllustration` component, [documentation is available here](https://digital-ai.github.io/dot-components/?path=/story/components-illustration--default)
|
|
44
|
+
|
|
45
|
+
### Standard HTML
|
|
46
|
+
|
|
47
|
+
If not using `dot-components` then import `@digital-ai/dot-illustrations` into your project as an npm package or as a git submodule. You can also download the contents of this repository and copy the `./integrations/index.css` and asset folders into your project.
|
|
48
|
+
|
|
49
|
+
```html
|
|
50
|
+
<link rel="stylesheet" href="./integrations/index.css" />
|
|
51
|
+
|
|
52
|
+
...
|
|
53
|
+
|
|
54
|
+
<span class="dot-integration">
|
|
55
|
+
<img class="${integration-ID}"></img>
|
|
32
56
|
</span>
|
|
33
57
|
```
|
|
34
58
|
|
package/package.json
CHANGED