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.
64 lines
2.5 KiB
64 lines
2.5 KiB
2 years ago
|
<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" color="{color}" size="{size}" fill="{fill}" width="{width}" shadow="{shadow}" tooltip="{tooltip}" tip_position="{tip_position}" />' />
|
||
|
|
|
||
|
|
<a href="/admin/#/icons"><button type="button">See all icons and search them.</button></a>
|