|
|
|
@ -1,5 +1,6 @@ |
|
|
|
|
<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)"; |
|
|
|
@ -21,7 +22,8 @@ |
|
|
|
|
font-size: 2em; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
icons div input { |
|
|
|
|
icons div input, |
|
|
|
|
icons div select { |
|
|
|
|
font-size: 1em; |
|
|
|
|
} |
|
|
|
|
</style> |
|
|
|
@ -33,7 +35,18 @@ |
|
|
|
|
<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> |
|
|
|
|
<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} /> |
|
|
|
@ -43,4 +56,8 @@ |
|
|
|
|
</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> |
|
|
|
|