You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
101 lines
3.8 KiB
101 lines
3.8 KiB
3 years ago
|
<svg xmlns="http://www.w3.org/2000/svg" width="800" height="395" viewBox="0 0 800 395">
|
||
|
|
<defs>
|
||
|
|
<style>
|
||
|
|
.a {
|
||
|
|
fill: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.h {
|
||
|
|
fill: #fff;
|
||
|
|
stroke: #a19ad1;
|
||
|
|
stroke-miterlimit: 10;
|
||
|
|
stroke-width: 4px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.b {
|
||
|
|
fill: #cdeffc;
|
||
|
|
}
|
||
|
|
|
||
|
|
.c, .j {
|
||
|
|
font-size: 14px;
|
||
|
|
font-family: system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
|
||
|
|
}
|
||
|
|
|
||
|
|
.c {
|
||
|
|
fill: #18162d;
|
||
|
|
}
|
||
|
|
|
||
|
|
.c, .e, .g, .j {
|
||
|
|
font-weight: 700;
|
||
|
|
}
|
||
|
|
|
||
|
|
.d {
|
||
|
|
font-family: Courier;
|
||
|
|
font-weight: 400;
|
||
|
|
}
|
||
|
|
|
||
|
|
.e, .g {
|
||
|
|
font-size: 18px;
|
||
|
|
font-family: Arial-BoldMT, Arial;
|
||
|
|
}
|
||
|
|
|
||
|
|
.e {
|
||
|
|
fill: #a19ad1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.f {
|
||
|
|
fill: #bec3c3;
|
||
|
|
}
|
||
|
|
|
||
|
|
.g {
|
||
|
|
fill: #6257b2;
|
||
|
|
}
|
||
|
|
|
||
|
|
.i {
|
||
|
|
fill: #c0bce0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.j {
|
||
|
|
fill: #312c59;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</defs>
|
||
|
|
<g>
|
||
|
|
<rect class="h" x="46.5" y="33.55" width="212" height="292.45"/>
|
||
|
|
<g>
|
||
|
|
<rect class="b" x="67.75" y="173.55" width="164.75" height="115.45" rx="4.83"/>
|
||
|
|
<text class="c" transform="translate(79.95 200.91)">export default <tspan class="d"><tspan x="0.56" y="16.8">function </tspan><tspan x="0" y="33.6">Button() { </tspan><tspan x="0" y="50.4" xml:space="preserve"> ... </tspan><tspan x="0" y="67.2">}</tspan></tspan></text>
|
||
|
|
</g>
|
||
|
|
<text class="e" transform="translate(86.99 62.68)">Component.js</text>
|
||
|
|
<rect class="f" x="68.11" y="76" width="164.75" height="40" rx="4.83"/>
|
||
|
|
<rect class="f" x="68.11" y="124.33" width="164.75" height="40" rx="4.83"/>
|
||
|
|
<text class="g" transform="translate(69.21 355.13)">one default export</text>
|
||
|
|
</g>
|
||
|
|
<g>
|
||
|
|
<text class="g" transform="translate(295.2 355.13)">multiple named exports</text>
|
||
|
|
<rect class="h" x="294.5" y="33.55" width="212" height="292.45"/>
|
||
|
|
<g>
|
||
|
|
<rect class="i" x="315.75" y="185.55" width="164.75" height="97.45" rx="4.83"/>
|
||
|
|
<text class="j" transform="translate(327.95 212.91)">export <tspan class="d" x="58.81" y="0">function </tspan><tspan class="d"><tspan x="0" y="16.8">Checkbox() { </tspan><tspan x="0" y="33.6" xml:space="preserve"> ... </tspan><tspan x="0" y="50.4">}</tspan></tspan></text>
|
||
|
|
</g>
|
||
|
|
<g>
|
||
|
|
<rect class="i" x="315.75" y="77.55" width="164.75" height="97.45" rx="4.83"/>
|
||
|
|
<text class="j" transform="translate(327.95 104.91)">export <tspan class="d" x="58.81" y="0">function </tspan><tspan class="d"><tspan x="0" y="16.8">Slider() { </tspan><tspan x="0" y="33.6" xml:space="preserve"> ... </tspan><tspan x="0" y="50.4">}</tspan></tspan></text>
|
||
|
|
</g>
|
||
|
|
<text class="e" transform="translate(329.98 62.68)">Components.js</text>
|
||
|
|
</g>
|
||
|
|
<g>
|
||
|
|
<rect class="h" x="543.5" y="33.55" width="212" height="292.45"/>
|
||
|
|
<g>
|
||
|
|
<rect class="i" x="564.75" y="77.55" width="164.75" height="97.45" rx="4.83"/>
|
||
|
|
<text class="j" transform="translate(576.95 104.91)">export <tspan class="d" x="58.81" y="0">function </tspan><tspan class="d"><tspan x="0" y="16.8">Avatar() { </tspan><tspan x="0" y="33.6" xml:space="preserve"> ... </tspan><tspan x="0" y="50.4">}</tspan></tspan></text>
|
||
|
|
</g>
|
||
|
|
<text class="e" transform="translate(559.48 62.68)">MixedComponents.js</text>
|
||
|
|
<g>
|
||
|
|
<rect class="b" x="565.11" y="185.28" width="164.75" height="115.45" rx="4.83"/>
|
||
|
|
<text class="c" transform="translate(577.31 212.64)">export default <tspan class="d"><tspan x="0.56" y="16.8">function </tspan><tspan x="0" y="33.6">FriendsList() { </tspan><tspan x="0" y="50.4" xml:space="preserve"> ... </tspan><tspan x="0" y="67.2">}</tspan></tspan></text>
|
||
|
|
</g>
|
||
|
|
<text class="g" transform="translate(577.2 355.18)">named export(s)<tspan x="-26.49" y="21.6">and one default export</tspan></text>
|
||
|
|
</g>
|
||
|
|
</svg>
|