Skip to content

Commit 132d2b7

Browse files
hperrinhperrin
committed
docs: add Svg component demo
1 parent 9dc65de commit 132d2b7

File tree

2 files changed

+139
-0
lines changed

2 files changed

+139
-0
lines changed

‎packages/site/src/routes/demo/common/+page.svelte

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,14 @@
2828
</svelte:fragment>
2929
</Demo>
3030

31+
<Demo component={Svg} file="common/_Svg.svelte">
32+
Svg Component
33+
<svelte:fragment slot="subtitle">
34+
In the SMUI components that let you customize which DOM element is used to
35+
render them, you can also use the Svg component to render an SVG.
36+
</svelte:fragment>
37+
</Demo>
38+
3139
<h4>Common Features and Use Patterns</h4>
3240

3341
<Demo component={TargetingClasses} file="common/_TargetingClasses.svelte">
@@ -175,6 +183,7 @@
175183
176184
import CommonLabelIcon from './_CommonLabelIcon.svelte';
177185
import SmuiElement from './_SmuiElement.svelte';
186+
import Svg from './_Svg.svelte';
178187
import TargetingClasses from './_TargetingClasses.svelte';
179188
import EventsAndModifiers from './_EventsAndModifiers.svelte';
180189
import ClassMap from './_ClassMap.svelte';

‎packages/site/src/routes/demo/common/_Svg.svelte

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
<!--
2+
Why is this a different component than SmuiElement?
3+
4+
Two reasons:
5+
6+
1. The SmuiElement component returns an HTMLElement type from `getElement`,
7+
and an SVG does not implement that interface.
8+
2. The SmuiElement component expects HTML attributes, while the Svg component
9+
expects SVG attributes.
10+
11+
When you use the Svg component, you are effectively creating a namespace
12+
boundary between HTML and SVG.
13+
-->
14+
15+
<div
16+
style="display: flex; justify-content: center; align-items: center; height: 140px;"
17+
>
18+
<Svg
19+
style="width: 100px; height: 100px;"
20+
xmlns="http://www.w3.org/2000/svg"
21+
viewBox="0 0 300 300"
22+
>
23+
<title>SVG Logo</title>
24+
<desc
25+
>Designed for the SVG Logo Contest in 2006 by Harvey Rayner, and adopted
26+
by W3C in 2009. It is available under the Creative Commons license for
27+
those who have an SVG product or who are using SVG on their site.</desc
28+
>
29+
30+
<metadata id="license">
31+
<rdf:RDF
32+
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
33+
xmlns:dc="http://purl.org/dc/elements/1.1/"
34+
xmlns:cc="http://web.resource.org/cc/"
35+
>
36+
<cc:Work rdf:about="">
37+
<dc:title>SVG Logo</dc:title>
38+
<dc:date>14-08-2009</dc:date>
39+
<dc:creator>
40+
<cc:Agent><dc:title>W3C</dc:title></cc:Agent>
41+
<cc:Agent><dc:title>Harvey Rayner, designer</dc:title></cc:Agent>
42+
</dc:creator>
43+
<dc:description>See document description</dc:description>
44+
<cc:license
45+
rdf:resource="http://creativecommons.org/licenses/by-nc-sa/2.5/"
46+
/>
47+
<dc:format>image/svg+xml</dc:format>
48+
<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
49+
</cc:Work>
50+
<cc:License
51+
rdf:about="http://creativecommons.org/licenses/by-nc-sa/2.5/"
52+
>
53+
<cc:permits rdf:resource="http://web.resource.org/cc/Reproduction" />
54+
<cc:permits rdf:resource="http://web.resource.org/cc/Distribution" />
55+
<cc:requires rdf:resource="http://web.resource.org/cc/Notice" />
56+
<cc:requires rdf:resource="http://web.resource.org/cc/Attribution" />
57+
<cc:prohibits
58+
rdf:resource="http://web.resource.org/cc/CommercialUse"
59+
/>
60+
<cc:permits
61+
rdf:resource="http://web.resource.org/cc/DerivativeWorks"
62+
/>
63+
<cc:requires rdf:resource="http://web.resource.org/cc/ShareAlike" />
64+
</cc:License>
65+
</rdf:RDF>
66+
</metadata>
67+
68+
<defs>
69+
<g id="SVG" fill="#ffffff" transform="scale(2) translate(20,79)">
70+
<path
71+
id="S"
72+
d="M 5.482,31.319 C2.163,28.001 0.109,23.419 0.109,18.358 C0.109,8.232 8.322,0.024 18.443,0.024 C28.569,0.024 36.782,8.232 36.782,18.358 L26.042,18.358 C26.042,14.164 22.638,10.765 18.443,10.765 C14.249,10.765 10.850,14.164 10.850,18.358 C10.850,20.453 11.701,22.351 13.070,23.721 L13.075,23.721 C14.450,25.101 15.595,25.500 18.443,25.952 L18.443,25.952 C23.509,26.479 28.091,28.006 31.409,31.324 L31.409,31.324 C34.728,34.643 36.782,39.225 36.782,44.286 C36.782,54.412 28.569,62.625 18.443,62.625 C8.322,62.625 0.109,54.412 0.109,44.286 L10.850,44.286 C10.850,48.480 14.249,51.884 18.443,51.884 C22.638,51.884 26.042,48.480 26.042,44.286 C26.042,42.191 25.191,40.298 23.821,38.923 L23.816,38.923 C22.441,37.548 20.468,37.074 18.443,36.697 L18.443,36.692 C13.533,35.939 8.800,34.638 5.482,31.319 L5.482,31.319 L5.482,31.319 Z"
73+
/>
74+
75+
<path
76+
id="V"
77+
d="M 73.452,0.024 L60.482,62.625 L49.742,62.625 L36.782,0.024 L47.522,0.024 L55.122,36.687 L62.712,0.024 L73.452,0.024 Z"
78+
/>
79+
80+
<path
81+
id="G"
82+
d="M 91.792,25.952 L110.126,25.952 L110.126,44.286 L110.131,44.286 C110.131,54.413 101.918,62.626 91.792,62.626 C81.665,62.626 73.458,54.413 73.458,44.286 L73.458,44.286 L73.458,18.359 L73.453,18.359 C73.453,8.233 81.665,0.025 91.792,0.025 C101.913,0.025 110.126,8.233 110.126,18.359 L99.385,18.359 C99.385,14.169 95.981,10.765 91.792,10.765 C87.597,10.765 84.198,14.169 84.198,18.359 L84.198,44.286 L84.198,44.286 C84.198,48.481 87.597,51.880 91.792,51.880 C95.981,51.880 99.380,48.481 99.385,44.291 L99.385,44.286 L99.385,36.698 L91.792,36.698 L91.792,25.952 L91.792,25.952 Z"
83+
/>
84+
</g>
85+
</defs>
86+
87+
<path
88+
id="base"
89+
fill="#000"
90+
d="M8.5,150 H291.5 V250 C291.5,273.5 273.5,291.5 250,291.5 H50 C26.5,291.5 8.5,273.5 8.5,250 Z"
91+
/>
92+
<g stroke-width="38.0086" stroke="#000">
93+
<g id="svgstar" transform="translate(150, 150)">
94+
<path
95+
id="svgbar"
96+
fill="#ffb13b"
97+
d="M-84.1487,-15.8513 a22.4171,22.4171 0 1 0 0,31.7026 h168.2974 a22.4171,22.4171 0 1 0 0,-31.7026 Z"
98+
/>
99+
<use xlink:href="#svgbar" transform="rotate(45)" />
100+
<use xlink:href="#svgbar" transform="rotate(90)" />
101+
<use xlink:href="#svgbar" transform="rotate(135)" />
102+
</g>
103+
</g>
104+
<use xlink:href="#svgstar" xmlns:xlink="http://www.w3.org/1999/xlink" />
105+
<use
106+
xlink:href="#base"
107+
opacity="0.85"
108+
xmlns:xlink="http://www.w3.org/1999/xlink"
109+
/>
110+
<use xlink:href="#SVG" xmlns:xlink="http://www.w3.org/1999/xlink" />
111+
</Svg>
112+
</div>
113+
114+
<div style="display: flex; align-items: center;">
115+
<IconButton on:click={() => clicked++}>
116+
<Icon component={Svg} viewBox="0 0 24 24">
117+
<path fill="currentColor" d={mdiAccount} />
118+
</Icon>
119+
</IconButton>
120+
</div>
121+
122+
<pre class="status">Clicked: {clicked}</pre>
123+
124+
<script lang="ts">
125+
import { mdiImage, mdiAccount } from '@mdi/js';
126+
import IconButton, { Icon } from '@smui/icon-button';
127+
import { Svg } from '@smui/common';
128+
129+
let clicked = 0;
130+
</script>

0 commit comments

Comments
 (0)