@khanacademy/wonder-blocks-icon 1.2.26 → 1.2.27
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 +6 -0
- package/dist/es/index.js +2 -61
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
package/dist/es/index.js
CHANGED
|
@@ -4,39 +4,19 @@ import * as React from 'react';
|
|
|
4
4
|
import { StyleSheet } from 'aphrodite';
|
|
5
5
|
import { addStyle } from '@khanacademy/wonder-blocks-core';
|
|
6
6
|
|
|
7
|
-
/**
|
|
8
|
-
* A simple function that tells us how many viewport pixels each icon size
|
|
9
|
-
* corresponds to.
|
|
10
|
-
*/
|
|
11
7
|
const viewportPixelsForSize = size => ({
|
|
12
8
|
small: 16,
|
|
13
9
|
medium: 24,
|
|
14
10
|
large: 48,
|
|
15
11
|
xlarge: 96
|
|
16
12
|
})[size];
|
|
17
|
-
/**
|
|
18
|
-
* A utility to find the right asset from an IconAsset to display in an icon
|
|
19
|
-
* at a given IconSize. We're looking for, in the following order:
|
|
20
|
-
* 1. The path for the IconSize (e.g. small, medium) requested
|
|
21
|
-
* 2. A path that's _smaller_ than the size we requested
|
|
22
|
-
* 3. Any path (what remains is one for a larger IconSize)
|
|
23
|
-
*
|
|
24
|
-
* The goal here is to provide a path that looks good at the given size...
|
|
25
|
-
* obviously, if the size that we want is provided, we'll use it. Otherwise we'd
|
|
26
|
-
* rather blow up a smaller, simpler icon than scrunch down a more complex one.
|
|
27
|
-
*/
|
|
28
|
-
|
|
29
13
|
const getPathForIcon = (icon, size) => {
|
|
30
14
|
if (icon[size]) {
|
|
31
|
-
// Great, we have the IconSize we actually requested
|
|
32
15
|
return {
|
|
33
16
|
assetSize: size,
|
|
34
17
|
path: icon[size]
|
|
35
18
|
};
|
|
36
19
|
} else {
|
|
37
|
-
// Oh, no, we don't have the right IconSize! Let's find the next best
|
|
38
|
-
// one...we prefer to find a smaller icon and blow it up instead of
|
|
39
|
-
// using a larger icon and shrinking it such that detail may be lost.
|
|
40
20
|
const desiredPixelSize = viewportPixelsForSize(size);
|
|
41
21
|
const availableSizes = Object.keys(icon);
|
|
42
22
|
|
|
@@ -62,42 +42,6 @@ const getPathForIcon = (icon, size) => {
|
|
|
62
42
|
|
|
63
43
|
const _excluded = ["color", "icon", "size", "style"];
|
|
64
44
|
const StyledSVG = addStyle("svg");
|
|
65
|
-
/**
|
|
66
|
-
* An Icon displays a small informational or decorative image as an SVG.
|
|
67
|
-
*
|
|
68
|
-
* ```js
|
|
69
|
-
* import Icon, {icons} from "@khanacademy/wonder-blocks-icon";
|
|
70
|
-
*
|
|
71
|
-
* <Icon
|
|
72
|
-
* icon={icons.search}
|
|
73
|
-
* color={Color.white}
|
|
74
|
-
* size="medium"
|
|
75
|
-
* style={{margin: 4}}
|
|
76
|
-
* />
|
|
77
|
-
* ```
|
|
78
|
-
*
|
|
79
|
-
* Wonder Blocks comes with a fixed set of icons available by importing `icons`,
|
|
80
|
-
* but you can also provide your own `IconAsset`.
|
|
81
|
-
*
|
|
82
|
-
* ```js
|
|
83
|
-
* import Icon from "@khanacademy/wonder-blocks-icon";
|
|
84
|
-
* import type {IconAsset} from "@khanacademy/wonder-blocks-icon";
|
|
85
|
-
*
|
|
86
|
-
* // Easter egg: what shape am I?
|
|
87
|
-
* const customIcon: IconAsset = {
|
|
88
|
-
* small: "M6.92820 0L13.85640 4L13.85640 12L6.92820 16L0 12L0 4Z",
|
|
89
|
-
* };
|
|
90
|
-
* ```
|
|
91
|
-
*
|
|
92
|
-
* `IconAsset` should be in the following format:
|
|
93
|
-
* ```js
|
|
94
|
-
* {small?: string, medium?: string, large?: string, xlarge?: string}
|
|
95
|
-
* ```
|
|
96
|
-
*
|
|
97
|
-
* These icons should fit into a viewport of 16, 24, 48, and 96 pixels,
|
|
98
|
-
* respectively.
|
|
99
|
-
*/
|
|
100
|
-
|
|
101
45
|
class Icon extends React.PureComponent {
|
|
102
46
|
render() {
|
|
103
47
|
const _this$props = this.props,
|
|
@@ -115,12 +59,12 @@ class Icon extends React.PureComponent {
|
|
|
115
59
|
} = getPathForIcon(icon, size);
|
|
116
60
|
const pixelSize = viewportPixelsForSize(size);
|
|
117
61
|
const viewboxPixelSize = viewportPixelsForSize(assetSize);
|
|
118
|
-
return
|
|
62
|
+
return React.createElement(StyledSVG, _extends({}, sharedProps, {
|
|
119
63
|
style: [styles.svg, style],
|
|
120
64
|
width: pixelSize,
|
|
121
65
|
height: pixelSize,
|
|
122
66
|
viewBox: `0 0 ${viewboxPixelSize} ${viewboxPixelSize}`
|
|
123
|
-
}),
|
|
67
|
+
}), React.createElement("path", {
|
|
124
68
|
fill: color,
|
|
125
69
|
d: path
|
|
126
70
|
}));
|
|
@@ -140,9 +84,6 @@ const styles = StyleSheet.create({
|
|
|
140
84
|
}
|
|
141
85
|
});
|
|
142
86
|
|
|
143
|
-
/**
|
|
144
|
-
* The source SVG paths for our icons at various sizes
|
|
145
|
-
*/
|
|
146
87
|
var iconAssets = {
|
|
147
88
|
add: {
|
|
148
89
|
medium: "M11 11V7a1 1 0 0 1 2 0v4h4a1 1 0 0 1 0 2h-4v4a1 1 0 0 1-2 0v-4H7a1 1 0 0 1 0-2h4zm1 13C5.373 24 0 18.627 0 12S5.373 0 12 0s12 5.373 12 12-5.373 12-12 12zm0-2c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@khanacademy/wonder-blocks-icon",
|
|
3
|
-
"version": "1.2.
|
|
3
|
+
"version": "1.2.27",
|
|
4
4
|
"design": "v1",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -16,10 +16,10 @@
|
|
|
16
16
|
"license": "MIT",
|
|
17
17
|
"dependencies": {
|
|
18
18
|
"@babel/runtime": "^7.16.3",
|
|
19
|
-
"@khanacademy/wonder-blocks-core": "^4.3.
|
|
19
|
+
"@khanacademy/wonder-blocks-core": "^4.3.1"
|
|
20
20
|
},
|
|
21
21
|
"devDependencies": {
|
|
22
|
-
"wb-dev-build-settings": "^0.
|
|
22
|
+
"wb-dev-build-settings": "^0.4.0"
|
|
23
23
|
},
|
|
24
24
|
"peerDependencies": {
|
|
25
25
|
"aphrodite": "^1.2.5",
|