@transclude/create 0.3.0 → 0.5.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/package.json
CHANGED
|
@@ -8,6 +8,16 @@ npm run dev
|
|
|
8
8
|
A page is an `.html` file in `app/routes/`. The directory tree is the route
|
|
9
9
|
table, so `app/routes/about.html` answers `/about`.
|
|
10
10
|
|
|
11
|
+
Icons are SVG files in `app/icons/`, compiled into one `/icons.svg` the browser
|
|
12
|
+
fetches once. A subdirectory becomes a library of its own, so an icon set you
|
|
13
|
+
downloaded goes in whole. `app/elements/svg-icon.html` points at them and is
|
|
14
|
+
yours to change:
|
|
15
|
+
|
|
16
|
+
```html
|
|
17
|
+
<svg-icon name="check"></svg-icon>
|
|
18
|
+
<svg-icon library="lucide" name="check" label="Mark as done"></svg-icon>
|
|
19
|
+
```
|
|
20
|
+
|
|
11
21
|
| | |
|
|
12
22
|
| --- | --- |
|
|
13
23
|
| `npm run dev` | the dev server, with hot reload |
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
<!-- Yours. Change the sizing, add a class, delete it if you have no icons.
|
|
2
|
+
It is here so the accessibility half is right from the start, which is the
|
|
3
|
+
half that fails quietly.
|
|
4
|
+
|
|
5
|
+
Put SVG files in `app/icons/`. The build compiles them into `/icons.svg`,
|
|
6
|
+
and a subdirectory becomes a library of its own. -->
|
|
7
|
+
|
|
8
|
+
<script properties>
|
|
9
|
+
export default {
|
|
10
|
+
// A directory in `app/icons/`, or `icons` for the files loose at the top.
|
|
11
|
+
// An icon set downloaded as a folder is a library named by that folder.
|
|
12
|
+
library: 'icons',
|
|
13
|
+
// A file in that library, without the extension. `check` in `lucide` draws
|
|
14
|
+
// `app/icons/lucide/check.svg`.
|
|
15
|
+
name: '',
|
|
16
|
+
// What a screen reader says. Empty means the icon repeats the text beside
|
|
17
|
+
// it, which is most icons, so it is hidden instead.
|
|
18
|
+
label: '',
|
|
19
|
+
};
|
|
20
|
+
</script>
|
|
21
|
+
|
|
22
|
+
<style>
|
|
23
|
+
/* No fill and no stroke here. Each symbol carries the ones its own file
|
|
24
|
+
declared, and an attribute on the symbol beats a value inherited from this
|
|
25
|
+
side. Size and color are the two this side owns: 1em follows the text, and
|
|
26
|
+
most icon sets draw with currentColor. */
|
|
27
|
+
:scope {
|
|
28
|
+
display: inline-flex;
|
|
29
|
+
vertical-align: -0.125em;
|
|
30
|
+
}
|
|
31
|
+
svg {
|
|
32
|
+
width: 1em;
|
|
33
|
+
height: 1em;
|
|
34
|
+
}
|
|
35
|
+
</style>
|
|
36
|
+
|
|
37
|
+
<!-- Two spellings, because they are different elements to a screen reader.
|
|
38
|
+
`aria-hidden` and a label together leave one nothing to say, so a labelled
|
|
39
|
+
icon is not also hidden. -->
|
|
40
|
+
<svg if="label" role="img" aria-label="${label}"><use href="/${library}.svg#${name}"></use></svg>
|
|
41
|
+
<svg else aria-hidden="true"><use href="/${library}.svg#${name}"></use></svg>
|
|
@@ -9,6 +9,16 @@ A page is an `.html` file in `app/routes/`. The directory tree is the route
|
|
|
9
9
|
table, so `app/routes/about.html` answers `/about`. `_layout.html` wraps every
|
|
10
10
|
page beside it and below.
|
|
11
11
|
|
|
12
|
+
Icons are SVG files in `app/icons/`, compiled into one `/icons.svg` the browser
|
|
13
|
+
fetches once. A subdirectory becomes a library of its own, so an icon set you
|
|
14
|
+
downloaded goes in whole. `app/elements/svg-icon.html` points at them and is
|
|
15
|
+
yours to change:
|
|
16
|
+
|
|
17
|
+
```html
|
|
18
|
+
<svg-icon name="check"></svg-icon>
|
|
19
|
+
<svg-icon library="lucide" name="check" label="Mark as done"></svg-icon>
|
|
20
|
+
```
|
|
21
|
+
|
|
12
22
|
| | |
|
|
13
23
|
| --- | --- |
|
|
14
24
|
| `npm run dev` | the dev server, with hot reload |
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
<!-- Yours. Change the sizing, add a class, delete it if you have no icons.
|
|
2
|
+
It is here so the accessibility half is right from the start, which is the
|
|
3
|
+
half that fails quietly.
|
|
4
|
+
|
|
5
|
+
Put SVG files in `app/icons/`. The build compiles them into `/icons.svg`,
|
|
6
|
+
and a subdirectory becomes a library of its own. -->
|
|
7
|
+
|
|
8
|
+
<script properties>
|
|
9
|
+
export default {
|
|
10
|
+
// A directory in `app/icons/`, or `icons` for the files loose at the top.
|
|
11
|
+
// An icon set downloaded as a folder is a library named by that folder.
|
|
12
|
+
library: 'icons',
|
|
13
|
+
// A file in that library, without the extension. `check` in `lucide` draws
|
|
14
|
+
// `app/icons/lucide/check.svg`.
|
|
15
|
+
name: '',
|
|
16
|
+
// What a screen reader says. Empty means the icon repeats the text beside
|
|
17
|
+
// it, which is most icons, so it is hidden instead.
|
|
18
|
+
label: '',
|
|
19
|
+
};
|
|
20
|
+
</script>
|
|
21
|
+
|
|
22
|
+
<style>
|
|
23
|
+
/* No fill and no stroke here. Each symbol carries the ones its own file
|
|
24
|
+
declared, and an attribute on the symbol beats a value inherited from this
|
|
25
|
+
side. Size and color are the two this side owns: 1em follows the text, and
|
|
26
|
+
most icon sets draw with currentColor. */
|
|
27
|
+
:scope {
|
|
28
|
+
display: inline-flex;
|
|
29
|
+
vertical-align: -0.125em;
|
|
30
|
+
}
|
|
31
|
+
svg {
|
|
32
|
+
width: 1em;
|
|
33
|
+
height: 1em;
|
|
34
|
+
}
|
|
35
|
+
</style>
|
|
36
|
+
|
|
37
|
+
<!-- Two spellings, because they are different elements to a screen reader.
|
|
38
|
+
`aria-hidden` and a label together leave one nothing to say, so a labelled
|
|
39
|
+
icon is not also hidden. -->
|
|
40
|
+
<svg if="label" role="img" aria-label="${label}"><use href="/${library}.svg#${name}"></use></svg>
|
|
41
|
+
<svg else aria-hidden="true"><use href="/${library}.svg#${name}"></use></svg>
|