Skip to content

Commit 7f049a3

Browse files
traceypoohtraceypooh
authored
Merge ba3f242 into 15e7dd5 
2 parents 15e7dd5 + ba3f242 commit 7f049a3

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

99 files changed

+6412
-2
lines changed

‎.github/workflows/icons.yml‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
name: Icons CI
2+
3+
on:
4+
push:
5+
branches: [ master ]
6+
pull_request:
7+
branches: [ master ]
8+
9+
jobs:
10+
build:
11+
runs-on: ubuntu-latest
12+
13+
steps:
14+
- uses: actions/checkout@v2
15+
- uses: actions/setup-node@v1
16+
with:
17+
node-version: 19.x
18+
19+
- name: Install dependencies
20+
working-directory: packages/ia-icon
21+
run: npm install
22+
23+
- name: Run tests
24+
working-directory: packages/ia-icon
25+
run: npx eslint

‎package.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"dependencies": {
33
"polymer-cli": "^1.9.11"
44
},
5-
"name": "iaux",
5+
"name": "@internetarchive/iaux",
66
"license": "AGPL-3.0-only",
77
"devDependencies": {
88
"eslint": "^5.12.0",
@@ -12,5 +12,6 @@
1212
"eslint-plugin-jest": "^22.1.3",
1313
"eslint-plugin-jsx-a11y": "^6.1.2",
1414
"eslint-plugin-react": "^7.12.3"
15-
}
15+
},
16+
"type": "module"
1617
}

‎packages/ia-icon/.eslintrc.cjs‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
module.exports = {
2+
env: {
3+
browser: true,
4+
},
5+
root: true,
6+
extends: 'airbnb-base',
7+
plugins: [
8+
'eslint-plugin-import',
9+
],
10+
rules: {
11+
// we use esm.sh self-hosted and `import from 'https://..' is fine
12+
'import/no-unresolved': [2, {
13+
ignore: [
14+
'^https://esm.archive.org/',
15+
'^https://offshoot.prod.archive.org/lit',
16+
],
17+
}],
18+
19+
// allow `import .. from '.js'` (.js suffix) in JS files
20+
'import/extensions': ['off'],
21+
22+
'jsx-a11y/label-has-for': 0,
23+
},
24+
};

‎packages/ia-icon/.gitignore‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
/node_modules/
2+
3+
# testing
4+
/coverage/

‎packages/ia-icon/LICENSE‎

Lines changed: 661 additions & 0 deletions
Large diffs are not rendered by default.

‎packages/ia-icon/README.md‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
# IA Icons
2+
3+
This repo builds JS source, tests, and test pages, from a subdirectory of svg files:
4+
5+
[svg/](svg/)
6+
7+
Each `.svg` source file can then be individually imported via JS/TS like:
8+
```js
9+
import twitter from 'https://esm.archive.org/@internetarchive/ia-icons/src/twitter.js'
10+
```
11+
12+
You can use in markup with the lit / web components definition like:
13+
```html
14+
<ia-icon-video></ia-icon-video>
15+
<script type="module" src="https://esm.archive.org/@internetarchive/ia-icons/src/video.js"></script>
16+
```
17+
18+
Each icon `.js` file defines an `<ia-icon>` `LitElement` web component.
19+
20+
## Demo Page
21+
**[test/](test/)**
22+
23+
## Updating
24+
25+
Please run:
26+
```sh
27+
./bin/build.sh
28+
```
29+
in a `git clone` of this repo to rebuild/update [src/](src/) and [test/](test/) files.
30+
31+
You can add a new (or change an existing) `.svg` file in the [svg/](svg/) subdir.
32+
33+
Running the [bin/build.sh](bin/build.sh) script will automatically create (or update)
34+
the relevant JS and test files.
35+

‎packages/ia-icon/bin/build.sh‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
#!/bin/zsh -e
2+
3+
# (re)generates all `src/*.js` and `test/` files (from `svg/*.svg` source images).
4+
5+
MYDIR=${0:a:h}
6+
7+
cd $MYDIR/..
8+
9+
# start of the main test/display page
10+
cat >| test/index.html << EOF
11+
<style>
12+
div {
13+
display: inline-block;
14+
width: 100px;
15+
padding: 5px;
16+
border: 1px solid gray;
17+
border-radius: 5px;
18+
vertical-align: top;
19+
margin: 10px 5px;
20+
background-color: #e9e9e9;
21+
}
22+
</style>
23+
<body>
24+
EOF
25+
26+
27+
for SVG in svg/*.svg; do
28+
BASENAME=$(basename $SVG .svg)
29+
OUT=src/${BASENAME}.js
30+
echo "generating $SVG => $OUT"
31+
32+
# create icon's `src/...js` JS file
33+
cat >| $OUT << EOF
34+
import IAIconBase from './base.js';
35+
36+
class IAIcon extends IAIconBase {
37+
constructor() {
38+
super(\`
39+
$(cat $SVG)
40+
\`);
41+
}
42+
}
43+
44+
customElements.define('ia-icon-$BASENAME', IAIcon);
45+
46+
export default IAIcon;
47+
EOF
48+
49+
50+
# add the icon to the test page
51+
cat >> test/index.html << EOF
52+
53+
<div>
54+
&lt;ia-icon-$BASENAME/&gt;
55+
<hr>
56+
<ia-icon-$BASENAME></ia-icon-$BASENAME>
57+
</div>
58+
<script type="module" src="../src/$BASENAME.js"></script>
59+
60+
61+
EOF
62+
63+
done

0 commit comments

Comments
 (0)