@internetarchive/ia-icons 1.3.4-a1 → 1.3.5
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/.eslintrc +16 -16
- package/LICENSE +661 -661
- package/README.md +45 -45
- package/ia-icon.js +5 -5
- package/index.html +124 -124
- package/index.js +3 -3
- package/karma.bs.config.js +16 -16
- package/karma.conf.js +30 -24
- package/package.json +108 -108
- package/src/ia-icon.js +128 -124
- package/src/icon-donate.js +23 -23
- package/test/ia-icons.test.js +17 -17
package/README.md
CHANGED
|
@@ -1,45 +1,45 @@
|
|
|
1
|
-
# ia-icons: SVG icon library for use in archive.org components
|
|
2
|
-
|
|
3
|
-
## Usage
|
|
4
|
-
|
|
5
|
-
```js
|
|
6
|
-
import { IAIcon } from './src/ia-icon';
|
|
7
|
-
```
|
|
8
|
-
|
|
9
|
-
```html
|
|
10
|
-
<ia-icon icon="close" style="--iconFillColor: #0066cc; --iconStrokeColor: #ffffff;"></ia-icon>
|
|
11
|
-
```
|
|
12
|
-
|
|
13
|
-
```css
|
|
14
|
-
ia-icon {
|
|
15
|
-
--iconFillColor: #0066cc;
|
|
16
|
-
--iconStrokeColor: #ffffff;
|
|
17
|
-
--iconWidth: 40px;
|
|
18
|
-
--iconHeight: 40px;
|
|
19
|
-
}
|
|
20
|
-
```
|
|
21
|
-
|
|
22
|
-
## Testing
|
|
23
|
-
|
|
24
|
-
Unit tests are placed in the ./test directory with the suffix and extension
|
|
25
|
-
".test.js". Any other JS files in the test directory will be ignored by Karma.
|
|
26
|
-
Run the tests with `yarn test`.
|
|
27
|
-
|
|
28
|
-
## Structure
|
|
29
|
-
|
|
30
|
-
* index.js - main component export
|
|
31
|
-
* index.html - file opened when running `yarn start`
|
|
32
|
-
* karma.conf.js - Karma runner config
|
|
33
|
-
* karma.bs.conf.js - Karma BrowserStack config. Note that BROWSER_STACK_USERNAME
|
|
34
|
-
and BROWSER_STACK_ACCESS_KEY need to be set as environment variables before
|
|
35
|
-
running.
|
|
36
|
-
* /src/ia-icons.js - Class definitions for each LitElement
|
|
37
|
-
* /src/icons - Place icon SVGs here. Convention is to export a Lit-html template
|
|
38
|
-
* /test - unit tests
|
|
39
|
-
|
|
40
|
-
## Single Icons
|
|
41
|
-
|
|
42
|
-
This package is part of [a monorepo](https://github.com/internetarchive/iaux-icons)
|
|
43
|
-
that includes a published package for each icon included here. Each package
|
|
44
|
-
includes a raw SVG file, a LitHtml template literal, and a defined custom
|
|
45
|
-
element created with LitElement.
|
|
1
|
+
# ia-icons: SVG icon library for use in archive.org components
|
|
2
|
+
|
|
3
|
+
## Usage
|
|
4
|
+
|
|
5
|
+
```js
|
|
6
|
+
import { IAIcon } from './src/ia-icon';
|
|
7
|
+
```
|
|
8
|
+
|
|
9
|
+
```html
|
|
10
|
+
<ia-icon icon="close" style="--iconFillColor: #0066cc; --iconStrokeColor: #ffffff;"></ia-icon>
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
```css
|
|
14
|
+
ia-icon {
|
|
15
|
+
--iconFillColor: #0066cc;
|
|
16
|
+
--iconStrokeColor: #ffffff;
|
|
17
|
+
--iconWidth: 40px;
|
|
18
|
+
--iconHeight: 40px;
|
|
19
|
+
}
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
## Testing
|
|
23
|
+
|
|
24
|
+
Unit tests are placed in the ./test directory with the suffix and extension
|
|
25
|
+
".test.js". Any other JS files in the test directory will be ignored by Karma.
|
|
26
|
+
Run the tests with `yarn test`.
|
|
27
|
+
|
|
28
|
+
## Structure
|
|
29
|
+
|
|
30
|
+
* index.js - main component export
|
|
31
|
+
* index.html - file opened when running `yarn start`
|
|
32
|
+
* karma.conf.js - Karma runner config
|
|
33
|
+
* karma.bs.conf.js - Karma BrowserStack config. Note that BROWSER_STACK_USERNAME
|
|
34
|
+
and BROWSER_STACK_ACCESS_KEY need to be set as environment variables before
|
|
35
|
+
running.
|
|
36
|
+
* /src/ia-icons.js - Class definitions for each LitElement
|
|
37
|
+
* /src/icons - Place icon SVGs here. Convention is to export a Lit-html template
|
|
38
|
+
* /test - unit tests
|
|
39
|
+
|
|
40
|
+
## Single Icons
|
|
41
|
+
|
|
42
|
+
This package is part of [a monorepo](https://github.com/internetarchive/iaux-icons)
|
|
43
|
+
that includes a published package for each icon included here. Each package
|
|
44
|
+
includes a raw SVG file, a LitHtml template literal, and a defined custom
|
|
45
|
+
element created with LitElement.
|
package/ia-icon.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
export default IAIcon;
|
|
1
|
+
/* eslint-disable import/no-duplicates */
|
|
2
|
+
import './src/ia-icon';
|
|
3
|
+
import IAIcon from './src/ia-icon';
|
|
4
|
+
|
|
5
|
+
export default IAIcon;
|
package/index.html
CHANGED
|
@@ -1,124 +1,124 @@
|
|
|
1
|
-
<!doctype html>
|
|
2
|
-
<html>
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="utf-8">
|
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
-
<script type="module" src="ia-icon.js"></script>
|
|
7
|
-
<script type="module" src="src/icon-donate.js"></script>
|
|
8
|
-
<title>IA SVG Icons</title>
|
|
9
|
-
<style>
|
|
10
|
-
html {
|
|
11
|
-
font: normal 10px 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
|
12
|
-
font-size: 10px;
|
|
13
|
-
--iconWidth: 40px;
|
|
14
|
-
--iconHeight: 40px;
|
|
15
|
-
}
|
|
16
|
-
body {
|
|
17
|
-
margin: 0;
|
|
18
|
-
padding: 0 2rem;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
h3 {
|
|
22
|
-
font-size: 2rem;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
ul {
|
|
26
|
-
display: grid;
|
|
27
|
-
grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
|
|
28
|
-
grid-gap: 1rem;
|
|
29
|
-
padding: 0;
|
|
30
|
-
list-style: none;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
li {
|
|
34
|
-
padding: 1.5rem 0;
|
|
35
|
-
border: 2px solid #ccc;
|
|
36
|
-
text-align: center;
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
li:hover {
|
|
40
|
-
color: #f0f0f0;
|
|
41
|
-
background: #222;
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
p {
|
|
45
|
-
margin: 0;
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
icon-donate {
|
|
49
|
-
width: 40px;
|
|
50
|
-
display: block;
|
|
51
|
-
}
|
|
52
|
-
</style>
|
|
53
|
-
</head>
|
|
54
|
-
|
|
55
|
-
<body>
|
|
56
|
-
<script type="module">
|
|
57
|
-
import { render, html } from './node_modules/lit/
|
|
58
|
-
|
|
59
|
-
const listItems = () => {
|
|
60
|
-
return [
|
|
61
|
-
'applePay',
|
|
62
|
-
'advance',
|
|
63
|
-
'audio',
|
|
64
|
-
'calendar',
|
|
65
|
-
'calendarBlank',
|
|
66
|
-
'close',
|
|
67
|
-
'closeCircle',
|
|
68
|
-
'collapseSidebar',
|
|
69
|
-
'creditCard',
|
|
70
|
-
'donate',
|
|
71
|
-
'download',
|
|
72
|
-
'editPencil',
|
|
73
|
-
'ellipses',
|
|
74
|
-
'email',
|
|
75
|
-
'facebook',
|
|
76
|
-
'googlePay',
|
|
77
|
-
'iaLogo',
|
|
78
|
-
'images',
|
|
79
|
-
'link',
|
|
80
|
-
'localePin',
|
|
81
|
-
'lock',
|
|
82
|
-
'magnifyMinus',
|
|
83
|
-
'magnifyPlus',
|
|
84
|
-
'paypal',
|
|
85
|
-
'pinterest',
|
|
86
|
-
'search',
|
|
87
|
-
'share',
|
|
88
|
-
'software',
|
|
89
|
-
'sortAscending',
|
|
90
|
-
'sortDescending',
|
|
91
|
-
'texts',
|
|
92
|
-
'toc',
|
|
93
|
-
'tumblr',
|
|
94
|
-
'twitter',
|
|
95
|
-
'upload',
|
|
96
|
-
'user',
|
|
97
|
-
'venmo',
|
|
98
|
-
'video',
|
|
99
|
-
'visualAdjustment',
|
|
100
|
-
'volumes',
|
|
101
|
-
'web',
|
|
102
|
-
'info',
|
|
103
|
-
].map((name) => {
|
|
104
|
-
const color = `rgb(${~~(Math.random() * 256)}, ${~~(Math.random() * 256)}, ${~~(Math.random() * 256)})`;
|
|
105
|
-
return html`
|
|
106
|
-
<li>
|
|
107
|
-
<ia-icon icon=${name} style="--iconFillColor: ${color}; --iconStrokeColor: ${color};"></ia-icon>
|
|
108
|
-
<p>${name}</p>
|
|
109
|
-
</li>
|
|
110
|
-
`;
|
|
111
|
-
});
|
|
112
|
-
};
|
|
113
|
-
|
|
114
|
-
render(html`
|
|
115
|
-
<h3>Icons using ${"<ia-icon>"}</h3>
|
|
116
|
-
<ul>
|
|
117
|
-
${listItems()}
|
|
118
|
-
</ul>
|
|
119
|
-
<h3>Icon created by extending IAIcon</h3>
|
|
120
|
-
<icon-donate></icon-donate>
|
|
121
|
-
`, document.body);
|
|
122
|
-
</script>
|
|
123
|
-
</body>
|
|
124
|
-
</html>
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<script type="module" src="ia-icon.js"></script>
|
|
7
|
+
<script type="module" src="src/icon-donate.js"></script>
|
|
8
|
+
<title>IA SVG Icons</title>
|
|
9
|
+
<style>
|
|
10
|
+
html {
|
|
11
|
+
font: normal 10px 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
|
12
|
+
font-size: 10px;
|
|
13
|
+
--iconWidth: 40px;
|
|
14
|
+
--iconHeight: 40px;
|
|
15
|
+
}
|
|
16
|
+
body {
|
|
17
|
+
margin: 0;
|
|
18
|
+
padding: 0 2rem;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
h3 {
|
|
22
|
+
font-size: 2rem;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
ul {
|
|
26
|
+
display: grid;
|
|
27
|
+
grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
|
|
28
|
+
grid-gap: 1rem;
|
|
29
|
+
padding: 0;
|
|
30
|
+
list-style: none;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
li {
|
|
34
|
+
padding: 1.5rem 0;
|
|
35
|
+
border: 2px solid #ccc;
|
|
36
|
+
text-align: center;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
li:hover {
|
|
40
|
+
color: #f0f0f0;
|
|
41
|
+
background: #222;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
p {
|
|
45
|
+
margin: 0;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
icon-donate {
|
|
49
|
+
width: 40px;
|
|
50
|
+
display: block;
|
|
51
|
+
}
|
|
52
|
+
</style>
|
|
53
|
+
</head>
|
|
54
|
+
|
|
55
|
+
<body>
|
|
56
|
+
<script type="module">
|
|
57
|
+
import { render, html } from './node_modules/lit-html/lit-html.js';
|
|
58
|
+
|
|
59
|
+
const listItems = () => {
|
|
60
|
+
return [
|
|
61
|
+
'applePay',
|
|
62
|
+
'advance',
|
|
63
|
+
'audio',
|
|
64
|
+
'calendar',
|
|
65
|
+
'calendarBlank',
|
|
66
|
+
'close',
|
|
67
|
+
'closeCircle',
|
|
68
|
+
'collapseSidebar',
|
|
69
|
+
'creditCard',
|
|
70
|
+
'donate',
|
|
71
|
+
'download',
|
|
72
|
+
'editPencil',
|
|
73
|
+
'ellipses',
|
|
74
|
+
'email',
|
|
75
|
+
'facebook',
|
|
76
|
+
'googlePay',
|
|
77
|
+
'iaLogo',
|
|
78
|
+
'images',
|
|
79
|
+
'link',
|
|
80
|
+
'localePin',
|
|
81
|
+
'lock',
|
|
82
|
+
'magnifyMinus',
|
|
83
|
+
'magnifyPlus',
|
|
84
|
+
'paypal',
|
|
85
|
+
'pinterest',
|
|
86
|
+
'search',
|
|
87
|
+
'share',
|
|
88
|
+
'software',
|
|
89
|
+
'sortAscending',
|
|
90
|
+
'sortDescending',
|
|
91
|
+
'texts',
|
|
92
|
+
'toc',
|
|
93
|
+
'tumblr',
|
|
94
|
+
'twitter',
|
|
95
|
+
'upload',
|
|
96
|
+
'user',
|
|
97
|
+
'venmo',
|
|
98
|
+
'video',
|
|
99
|
+
'visualAdjustment',
|
|
100
|
+
'volumes',
|
|
101
|
+
'web',
|
|
102
|
+
'info',
|
|
103
|
+
].map((name) => {
|
|
104
|
+
const color = `rgb(${~~(Math.random() * 256)}, ${~~(Math.random() * 256)}, ${~~(Math.random() * 256)})`;
|
|
105
|
+
return html`
|
|
106
|
+
<li>
|
|
107
|
+
<ia-icon icon=${name} style="--iconFillColor: ${color}; --iconStrokeColor: ${color};"></ia-icon>
|
|
108
|
+
<p>${name}</p>
|
|
109
|
+
</li>
|
|
110
|
+
`;
|
|
111
|
+
});
|
|
112
|
+
};
|
|
113
|
+
|
|
114
|
+
render(html`
|
|
115
|
+
<h3>Icons using ${"<ia-icon>"}</h3>
|
|
116
|
+
<ul>
|
|
117
|
+
${listItems()}
|
|
118
|
+
</ul>
|
|
119
|
+
<h3>Icon created by extending IAIcon</h3>
|
|
120
|
+
<icon-donate></icon-donate>
|
|
121
|
+
`, document.body);
|
|
122
|
+
</script>
|
|
123
|
+
</body>
|
|
124
|
+
</html>
|
package/index.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import IAIcon from './src/ia-icon';
|
|
2
|
-
|
|
3
|
-
export default IAIcon;
|
|
1
|
+
import IAIcon from './src/ia-icon';
|
|
2
|
+
|
|
3
|
+
export default IAIcon;
|
package/karma.bs.config.js
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
/* eslint-disable import/no-extraneous-dependencies */
|
|
2
|
-
const merge = require('webpack-merge');
|
|
3
|
-
const bsSettings = require('@open-wc/testing-karma-bs/bs-settings.js');
|
|
4
|
-
const createBaseConfig = require('./karma.conf.js');
|
|
5
|
-
|
|
6
|
-
module.exports = (config) => {
|
|
7
|
-
config.set(
|
|
8
|
-
merge(bsSettings(config), createBaseConfig(config), {
|
|
9
|
-
browserStack: {
|
|
10
|
-
project: 'ia-icons',
|
|
11
|
-
},
|
|
12
|
-
}),
|
|
13
|
-
);
|
|
14
|
-
|
|
15
|
-
return config;
|
|
16
|
-
};
|
|
1
|
+
/* eslint-disable import/no-extraneous-dependencies */
|
|
2
|
+
const merge = require('webpack-merge');
|
|
3
|
+
const bsSettings = require('@open-wc/testing-karma-bs/bs-settings.js');
|
|
4
|
+
const createBaseConfig = require('./karma.conf.js');
|
|
5
|
+
|
|
6
|
+
module.exports = (config) => {
|
|
7
|
+
config.set(
|
|
8
|
+
merge(bsSettings(config), createBaseConfig(config), {
|
|
9
|
+
browserStack: {
|
|
10
|
+
project: 'ia-icons',
|
|
11
|
+
},
|
|
12
|
+
}),
|
|
13
|
+
);
|
|
14
|
+
|
|
15
|
+
return config;
|
|
16
|
+
};
|
package/karma.conf.js
CHANGED
|
@@ -1,24 +1,30 @@
|
|
|
1
|
-
/* eslint-disable import/no-extraneous-dependencies */
|
|
2
|
-
const { createDefaultConfig } = require('@open-wc/testing-karma');
|
|
3
|
-
const merge = require('webpack-merge');
|
|
4
|
-
|
|
5
|
-
module.exports = (config) => {
|
|
6
|
-
config.set(
|
|
7
|
-
merge(createDefaultConfig(config), {
|
|
8
|
-
files: [
|
|
9
|
-
// runs all files ending with .test in the test folder,
|
|
10
|
-
// can be overwritten by passing a --grep flag. examples:
|
|
11
|
-
//
|
|
12
|
-
// npm run test -- --grep test/foo/bar.test.js
|
|
13
|
-
// npm run test -- --grep test/bar/*
|
|
14
|
-
{ pattern: config.grep ? config.grep : 'test/**/*.test.js', type: 'module' },
|
|
15
|
-
],
|
|
16
|
-
|
|
17
|
-
esm: {
|
|
18
|
-
nodeResolve: true,
|
|
19
|
-
},
|
|
20
|
-
// you can overwrite/extend the config further
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
1
|
+
/* eslint-disable import/no-extraneous-dependencies */
|
|
2
|
+
const { createDefaultConfig } = require('@open-wc/testing-karma');
|
|
3
|
+
const merge = require('webpack-merge');
|
|
4
|
+
|
|
5
|
+
module.exports = (config) => {
|
|
6
|
+
config.set(
|
|
7
|
+
merge(createDefaultConfig(config), {
|
|
8
|
+
files: [
|
|
9
|
+
// runs all files ending with .test in the test folder,
|
|
10
|
+
// can be overwritten by passing a --grep flag. examples:
|
|
11
|
+
//
|
|
12
|
+
// npm run test -- --grep test/foo/bar.test.js
|
|
13
|
+
// npm run test -- --grep test/bar/*
|
|
14
|
+
{ pattern: config.grep ? config.grep : 'test/**/*.test.js', type: 'module' },
|
|
15
|
+
],
|
|
16
|
+
|
|
17
|
+
esm: {
|
|
18
|
+
nodeResolve: true,
|
|
19
|
+
},
|
|
20
|
+
// you can overwrite/extend the config further
|
|
21
|
+
coverageIstanbulReporter: {
|
|
22
|
+
thresholds: {
|
|
23
|
+
emitWarning: true, // set to `true` to not fail the test command when thresholds are not met
|
|
24
|
+
// thresholds for all files
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
}),
|
|
28
|
+
);
|
|
29
|
+
return config;
|
|
30
|
+
};
|