@nl-rvo/css-icon 1.5.1 → 1.6.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/CHANGELOG.md +10 -0
- package/README.md +18 -4
- package/dist/index.css +36 -24
- package/dist/index.min.css +1 -1
- package/dist/index.mjs +1 -1
- package/package.json +3 -2
- package/src/index.scss +21 -50
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,15 @@
|
|
|
1
1
|
# `@nl-rvo/css-icon`
|
|
2
2
|
|
|
3
|
+
## 1.6.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- 83a85f5: Moved unneccersary functions from Icon and cleaned up the code for this component.
|
|
8
|
+
|
|
9
|
+
### Patch Changes
|
|
10
|
+
|
|
11
|
+
- 084a230: Ensure package is published with provenance
|
|
12
|
+
|
|
3
13
|
## 1.5.1
|
|
4
14
|
|
|
5
15
|
### Patch Changes
|
package/README.md
CHANGED
|
@@ -1,5 +1,19 @@
|
|
|
1
|
-
|
|
1
|
+
# Icoon
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
3
|
+
Een icoon is een grafisch symbool dat gebruikt wordt als visuele aanvulling bij een tekst, button of functionaliteit.
|
|
4
|
+
|
|
5
|
+
## Wanneer gebruik je een Icon
|
|
6
|
+
|
|
7
|
+
Gebruik een icoon als aanvulling bij bijvoorbeeld een label, een button of link om de herkenbaarheid en scanbaarheid te vergroten.
|
|
8
|
+
|
|
9
|
+
## Anatomie van een Icon
|
|
10
|
+
|
|
11
|
+
Het component bestaat uit:
|
|
12
|
+
|
|
13
|
+
- Het symbool.
|
|
14
|
+
|
|
15
|
+
## Richtlijnen
|
|
16
|
+
|
|
17
|
+
- Gebruik alleen de Rijkshuisstijl iconen die beschikbaar zijn in ROOS.
|
|
18
|
+
- Verschillende gebruikers kunnen een icoon op verschillende manier interpreteren en moet daarom altijd voorzien worden van tekst.
|
|
19
|
+
- Iconen zijn altijd decoratief en worden verborgen voor schermlezers.
|
package/dist/index.css
CHANGED
|
@@ -27,9 +27,45 @@
|
|
|
27
27
|
|
|
28
28
|
.rvo-icon {
|
|
29
29
|
background-color: var(--utrecht-icon-color, currentColor);
|
|
30
|
+
-webkit-mask-image: var(--rvo-icon-current);
|
|
31
|
+
mask-image: var(--rvo-icon-current);
|
|
32
|
+
-webkit-mask-position: center center;
|
|
33
|
+
mask-position: center center;
|
|
34
|
+
-webkit-mask-repeat: no-repeat;
|
|
35
|
+
mask-repeat: no-repeat;
|
|
36
|
+
-webkit-mask-size: 100%;
|
|
37
|
+
mask-size: 100%;
|
|
30
38
|
min-inline-size: var(--utrecht-icon-size);
|
|
31
39
|
}
|
|
32
40
|
|
|
41
|
+
.rvo-icon--bg {
|
|
42
|
+
background-image: var(--rvo-icon-current);
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.rvo-icon--wit {
|
|
46
|
+
--utrecht-icon-color: var(--rvo-color-wit);
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.rvo-icon--hemelblauw {
|
|
50
|
+
--utrecht-icon-color: var(--rvo-color-hemelblauw);
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.rvo-icon--donkerblauw {
|
|
54
|
+
--utrecht-icon-color: var(--rvo-color-donkerblauw);
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.rvo-icon--lintblauw {
|
|
58
|
+
--utrecht-icon-color: var(--rvo-color-lintblauw);
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.rvo-icon--zwart {
|
|
62
|
+
--utrecht-icon-color: var(--rvo-color-zwart);
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.rvo-icon--grijs-700 {
|
|
66
|
+
--utrecht-icon-color: var(--rvo-color-grijs-700);
|
|
67
|
+
}
|
|
68
|
+
|
|
33
69
|
.rvo-icon--xs {
|
|
34
70
|
--utrecht-icon-size: var(--rvo-icon-xs-width);
|
|
35
71
|
}
|
|
@@ -60,28 +96,4 @@
|
|
|
60
96
|
|
|
61
97
|
.rvo-icon--4xl {
|
|
62
98
|
--utrecht-icon-size: var(--rvo-icon-4xl-width);
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
.rvo-icon--wit {
|
|
66
|
-
--utrecht-icon-color: var(--rvo-color-wit);
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
.rvo-icon--hemelblauw {
|
|
70
|
-
--utrecht-icon-color: var(--rvo-color-hemelblauw);
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
.rvo-icon--donkerblauw {
|
|
74
|
-
--utrecht-icon-color: var(--rvo-color-donkerblauw);
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
.rvo-icon--lintblauw {
|
|
78
|
-
--utrecht-icon-color: var(--rvo-color-lintblauw);
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
.rvo-icon--zwart {
|
|
82
|
-
--utrecht-icon-color: var(--rvo-color-zwart);
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
.rvo-icon--grijs-700 {
|
|
86
|
-
--utrecht-icon-color: var(--rvo-color-grijs-700);
|
|
87
99
|
}
|
package/dist/index.min.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.utrecht-icon{block-size:var(--utrecht-icon-size);color:var(--utrecht-icon-color);display:inline-block;font-size:var(--utrecht-icon-size);inline-size:var(--utrecht-icon-size);inset-block-start:var(--utrecht-icon-inset-block-start,0);position:relative}.utrecht-icon svg{height:100%;pointer-events:none;width:100%}.rvo-icon{background-color:var(--utrecht-icon-color,currentColor);min-inline-size:var(--utrecht-icon-size)}.rvo-icon--
|
|
1
|
+
.utrecht-icon{block-size:var(--utrecht-icon-size);color:var(--utrecht-icon-color);display:inline-block;font-size:var(--utrecht-icon-size);inline-size:var(--utrecht-icon-size);inset-block-start:var(--utrecht-icon-inset-block-start,0);position:relative}.utrecht-icon svg{height:100%;pointer-events:none;width:100%}.rvo-icon{background-color:var(--utrecht-icon-color,currentColor);-webkit-mask-image:var(--rvo-icon-current);mask-image:var(--rvo-icon-current);-webkit-mask-position:center center;mask-position:center center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100%;mask-size:100%;min-inline-size:var(--utrecht-icon-size)}.rvo-icon--bg{background-image:var(--rvo-icon-current)}.rvo-icon--wit{--utrecht-icon-color:var(--rvo-color-wit)}.rvo-icon--hemelblauw{--utrecht-icon-color:var(--rvo-color-hemelblauw)}.rvo-icon--donkerblauw{--utrecht-icon-color:var(--rvo-color-donkerblauw)}.rvo-icon--lintblauw{--utrecht-icon-color:var(--rvo-color-lintblauw)}.rvo-icon--zwart{--utrecht-icon-color:var(--rvo-color-zwart)}.rvo-icon--grijs-700{--utrecht-icon-color:var(--rvo-color-grijs-700)}.rvo-icon--xs{--utrecht-icon-size:var(--rvo-icon-xs-width)}.rvo-icon--sm{--utrecht-icon-size:var(--rvo-icon-sm-width)}.rvo-icon--md{--utrecht-icon-size:var(--rvo-icon-md-width)}.rvo-icon--lg{--utrecht-icon-size:var(--rvo-icon-lg-width)}.rvo-icon--xl{--utrecht-icon-size:var(--rvo-icon-xl-width)}.rvo-icon--2xl{--utrecht-icon-size:var(--rvo-icon-2xl-width)}.rvo-icon--3xl{--utrecht-icon-size:var(--rvo-icon-3xl-width)}.rvo-icon--4xl{--utrecht-icon-size:var(--rvo-icon-4xl-width)}
|
package/dist/index.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export default ".utrecht-icon{block-size:var(--utrecht-icon-size);color:var(--utrecht-icon-color);display:inline-block;font-size:var(--utrecht-icon-size);inline-size:var(--utrecht-icon-size);inset-block-start:var(--utrecht-icon-inset-block-start,0);position:relative}.utrecht-icon svg{height:100%;pointer-events:none;width:100%}.rvo-icon{background-color:var(--utrecht-icon-color,currentColor);min-inline-size:var(--utrecht-icon-size)}.rvo-icon--
|
|
1
|
+
export default ".utrecht-icon{block-size:var(--utrecht-icon-size);color:var(--utrecht-icon-color);display:inline-block;font-size:var(--utrecht-icon-size);inline-size:var(--utrecht-icon-size);inset-block-start:var(--utrecht-icon-inset-block-start,0);position:relative}.utrecht-icon svg{height:100%;pointer-events:none;width:100%}.rvo-icon{background-color:var(--utrecht-icon-color,currentColor);-webkit-mask-image:var(--rvo-icon-current);mask-image:var(--rvo-icon-current);-webkit-mask-position:center center;mask-position:center center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100%;mask-size:100%;min-inline-size:var(--utrecht-icon-size)}.rvo-icon--bg{background-image:var(--rvo-icon-current)}.rvo-icon--wit{--utrecht-icon-color:var(--rvo-color-wit)}.rvo-icon--hemelblauw{--utrecht-icon-color:var(--rvo-color-hemelblauw)}.rvo-icon--donkerblauw{--utrecht-icon-color:var(--rvo-color-donkerblauw)}.rvo-icon--lintblauw{--utrecht-icon-color:var(--rvo-color-lintblauw)}.rvo-icon--zwart{--utrecht-icon-color:var(--rvo-color-zwart)}.rvo-icon--grijs-700{--utrecht-icon-color:var(--rvo-color-grijs-700)}.rvo-icon--xs{--utrecht-icon-size:var(--rvo-icon-xs-width)}.rvo-icon--sm{--utrecht-icon-size:var(--rvo-icon-sm-width)}.rvo-icon--md{--utrecht-icon-size:var(--rvo-icon-md-width)}.rvo-icon--lg{--utrecht-icon-size:var(--rvo-icon-lg-width)}.rvo-icon--xl{--utrecht-icon-size:var(--rvo-icon-xl-width)}.rvo-icon--2xl{--utrecht-icon-size:var(--rvo-icon-2xl-width)}.rvo-icon--3xl{--utrecht-icon-size:var(--rvo-icon-3xl-width)}.rvo-icon--4xl{--utrecht-icon-size:var(--rvo-icon-4xl-width)}";
|
package/package.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "1.
|
|
2
|
+
"version": "1.6.0",
|
|
3
3
|
"author": "Community for NL Design System",
|
|
4
4
|
"license": "CC0-1.0",
|
|
5
5
|
"name": "@nl-rvo/css-icon",
|
|
@@ -17,7 +17,8 @@
|
|
|
17
17
|
],
|
|
18
18
|
"main": "dist/index.css",
|
|
19
19
|
"publishConfig": {
|
|
20
|
-
"access": "public"
|
|
20
|
+
"access": "public",
|
|
21
|
+
"provenance": true
|
|
21
22
|
},
|
|
22
23
|
"repository": {
|
|
23
24
|
"type": "git+ssh",
|
package/src/index.scss
CHANGED
|
@@ -4,63 +4,34 @@
|
|
|
4
4
|
*/
|
|
5
5
|
@use "~@utrecht/icon-css/dist/index.css" as *;
|
|
6
6
|
|
|
7
|
+
$rvo-icon-kinds: (wit, hemelblauw, donkerblauw, lintblauw, zwart, grijs-700) !default;
|
|
8
|
+
$rvo-icon-sizes: (xs, sm, md, lg, xl, 2xl, 3xl, 4xl) !default;
|
|
9
|
+
|
|
7
10
|
.rvo-icon {
|
|
8
11
|
background-color: var(--utrecht-icon-color, currentColor);
|
|
12
|
+
-webkit-mask-image: var(--rvo-icon-current);
|
|
13
|
+
mask-image: var(--rvo-icon-current);
|
|
14
|
+
-webkit-mask-position: center center;
|
|
15
|
+
mask-position: center center;
|
|
16
|
+
-webkit-mask-repeat: no-repeat;
|
|
17
|
+
mask-repeat: no-repeat;
|
|
18
|
+
-webkit-mask-size: 100%;
|
|
19
|
+
mask-size: 100%;
|
|
9
20
|
min-inline-size: var(--utrecht-icon-size);
|
|
10
21
|
}
|
|
11
22
|
|
|
12
|
-
.rvo-icon--
|
|
13
|
-
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
.rvo-icon--sm {
|
|
17
|
-
--utrecht-icon-size: var(--rvo-icon-sm-width);
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
.rvo-icon--md {
|
|
21
|
-
--utrecht-icon-size: var(--rvo-icon-md-width);
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
.rvo-icon--lg {
|
|
25
|
-
--utrecht-icon-size: var(--rvo-icon-lg-width);
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
.rvo-icon--xl {
|
|
29
|
-
--utrecht-icon-size: var(--rvo-icon-xl-width);
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
.rvo-icon--2xl {
|
|
33
|
-
--utrecht-icon-size: var(--rvo-icon-2xl-width);
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
.rvo-icon--3xl {
|
|
37
|
-
--utrecht-icon-size: var(--rvo-icon-3xl-width);
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
.rvo-icon--4xl {
|
|
41
|
-
--utrecht-icon-size: var(--rvo-icon-4xl-width);
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
.rvo-icon--wit {
|
|
45
|
-
--utrecht-icon-color: var(--rvo-color-wit);
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
.rvo-icon--hemelblauw {
|
|
49
|
-
--utrecht-icon-color: var(--rvo-color-hemelblauw);
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
.rvo-icon--donkerblauw {
|
|
53
|
-
--utrecht-icon-color: var(--rvo-color-donkerblauw);
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
.rvo-icon--lintblauw {
|
|
57
|
-
--utrecht-icon-color: var(--rvo-color-lintblauw);
|
|
23
|
+
.rvo-icon--bg {
|
|
24
|
+
background-image: var(--rvo-icon-current);
|
|
58
25
|
}
|
|
59
26
|
|
|
60
|
-
|
|
61
|
-
|
|
27
|
+
@each $kind in $rvo-icon-kinds {
|
|
28
|
+
.rvo-icon--#{$kind} {
|
|
29
|
+
--utrecht-icon-color: var(--rvo-color-#{$kind});
|
|
30
|
+
}
|
|
62
31
|
}
|
|
63
32
|
|
|
64
|
-
|
|
65
|
-
|
|
33
|
+
@each $size in $rvo-icon-sizes {
|
|
34
|
+
.rvo-icon--#{$size} {
|
|
35
|
+
--utrecht-icon-size: var(--rvo-icon-#{$size}-width);
|
|
36
|
+
}
|
|
66
37
|
}
|