-
Notifications
You must be signed in to change notification settings - Fork 1
/
Icon.svelte
53 lines (47 loc) · 1.15 KB
/
Icon.svelte
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<script>
export const defaultFill = 'none';
export const defaultSize = 24;
export const defaultStroke = 'currentColor';
export const defaultStrokeWidth = 2;
const defaultGlyph = null;
const strokeLinecap = 'round';
const strokeLinejoin = 'round';
const svgXmlns = 'http://www.w3.org/2000/svg';
export let fill = defaultFill;
export let glyph = defaultGlyph;
export let glyphSize = defaultSize;
export let size = defaultSize;
export let stroke = defaultStroke;
export let strokeWidth = defaultStrokeWidth;
// FIXME https://github.com/sveltejs/svelte/issues/4442
$: fill = fill || defaultFill;
$: glyph = glyph || defaultGlyph;
$: size = size || defaultSize;
$: stroke = stroke || defaultStroke;
$: strokeWidth = strokeWidth || defaultStrokeWidth;
$: viewBox = `0 0 ${glyphSize} ${glyphSize}`;
</script>
<div>
<svg
{fill}
{stroke}
{svgXmlns}
{viewBox}
height={size}
stroke-linecap={strokeLinecap}
stroke-linejoin={strokeLinejoin}
stroke-width={strokeWidth}
width={size}
>
<svelte:component this={glyph} />
</svg>
</div>
<style>
div {
display: inline-flex;
vertical-align: middle;
}
svg {
pointer-events: none;
}
</style>