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.
46 lines
1.9 KiB
46 lines
1.9 KiB
<script>
|
|
import Icon from "$/client/components/Icon.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 {
|
|
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: <input name="tip_position" bind:value={ tip_position } /></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>
|
|
<a href="/admin/#/icons"><button type="button">See all icons and search them.</button></a>
|
|
|