This is a parody of leetcode.com for designers. It's being developed live on Twitch.tv/zedashaw to demonstrate how to make a parody of a website.
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.
pixelperfectionist/admin/bando/demos/Icon.svelte

64 lines
2.5 KiB

<script>
import Icon from "$/client/components/Icon.svelte";
import Code from "$/client/components/Code.svelte";
let size = 64;
let fill = "none";
let color = "var(--color)";
let width = "2px";
let shadow = "";
let tooltip = "This is a tip!";
let tip_position = "bottom";
</script>
<style>
icons {
display: flex;
flex-direction: column;
}
icons div {
display: flex;
flex-direction: row;
font-size: 2em;
}
icons div input,
icons div select {
font-size: 1em;
}
</style>
<icons>
<div>size: <input name="size" bind:value={ size } /></div>
<div>fill: <input name="fill" bind:value={ fill } /></div>
<div>width: <input name="width" bind:value={ width } /></div>
<div>color: <input name="color" bind:value={ color } /></div>
<div>shadow: <input name="shadow" type="checkbox" bind:checked={ shadow } /></div>
<div>tooltip: <input name="tooltip" bind:value={ tooltip } /></div>
<div>tip_position:
<select name="tip_position" bind:value={ tip_position }>
<option>bottom</option>
<option>left</option>
<option>right</option>
<option>top</option>
<option>bottom-left</option>
<option>bottom-right</option>
<option>top-left</option>
<option>top-right</option>
</select>
</div>
<Icon name="keyboard" color={color} size={size} fill={fill} width={width} shadow={shadow} tooltip={tooltip} tip_position={tip_position} />
<Icon name="alarm-clock" color={color} size={size} fill={fill} width={width} shadow={shadow} tooltip={tooltip} tip_position={tip_position} />
<Icon name="activity" color={color} size={size} fill={fill} width={width} shadow={shadow} tooltip={tooltip} tip_position={tip_position} />
<Icon name="apple" color={color} size={size} fill={fill} width={width} shadow={shadow} tooltip={tooltip} tip_position={tip_position} />
<Icon name="angry" color={color} size={size} fill={fill} width={width} shadow={shadow} tooltip={tooltip} tip_position={tip_position} />
<Icon name="anchor" color={color} size={size} fill={fill} width={width} shadow={shadow} tooltip={tooltip} tip_position={tip_position} />
</icons>
<hr>
<h4>Code Sample using <code>anchor</code></h4>
<Code language="html" content='<Icon name="anchor"&#13; color="{color}"&#13; size="{size}"&#13; fill="{fill}"&#13; width="{width}"&#13; shadow="{shadow}"&#13; tooltip="{tooltip}"&#13; tip_position="{tip_position}" />' />
<a href="/admin/#/icons"><button type="button">See all icons and search them.</button></a>