parent
17e05130e3
commit
7c6c810efc
@ -1,114 +1,46 @@ |
|||||||
<script> |
<script> |
||||||
import Icon from "$/client/components/Icon.svelte"; |
import Icon from "$/client/components/Icon.svelte"; |
||||||
import { onMount } from "svelte"; |
let size = 64; |
||||||
import api from "$/client/api.js"; |
let fill = "none"; |
||||||
import { log } from "$/client/logging.js"; |
let color = "var(--color)"; |
||||||
|
let width = "2px"; |
||||||
let all_icons = []; |
let shadow = ""; |
||||||
let inactive = false; |
let tooltip = "This is a tip!"; |
||||||
let icons = []; |
let tip_position = "bottom"; |
||||||
export let size=48; |
|
||||||
let search = ""; |
|
||||||
export let labels=true; |
|
||||||
export let tight=false; |
|
||||||
let message = ""; |
|
||||||
|
|
||||||
const search_icons = (pattern) => { |
|
||||||
icons = all_icons.filter(i => i.includes(pattern)); |
|
||||||
} |
|
||||||
|
|
||||||
$: search_icons(search); |
|
||||||
|
|
||||||
const gen_code = (name) => { |
|
||||||
let results = `<Icon name="${name}" size="${size}" />`; |
|
||||||
|
|
||||||
navigator.clipboard.writeText(results).then(() => { |
|
||||||
message = `${name} copied to clipboard.`; |
|
||||||
}, () => { |
|
||||||
message = `${name} copy FAILED.`; |
|
||||||
}); |
|
||||||
} |
|
||||||
|
|
||||||
onMount(async () => { |
|
||||||
const [status, data] = await api.get("/icons/index.json"); |
|
||||||
|
|
||||||
if(status === 200) { |
|
||||||
icons = data; |
|
||||||
all_icons = icons; |
|
||||||
} else { |
|
||||||
log.error("Invalid response", status, data); |
|
||||||
} |
|
||||||
}); |
|
||||||
</script> |
</script> |
||||||
|
|
||||||
<style> |
<style> |
||||||
icons { |
icons { |
||||||
display: grid; |
|
||||||
grid-template-columns: repeat(6, 1fr); |
|
||||||
grid-template-rows: auto; |
|
||||||
row-gap: 1rem; |
|
||||||
} |
|
||||||
|
|
||||||
icons.tight { |
|
||||||
grid-template-columns: repeat(10, 1fr); |
|
||||||
} |
|
||||||
|
|
||||||
icons icon { |
|
||||||
display: flex; |
display: flex; |
||||||
flex-direction: column; |
flex-direction: column; |
||||||
align-items: center; |
|
||||||
justify-content: center; |
|
||||||
} |
} |
||||||
|
|
||||||
search-bar { |
icons div { |
||||||
display: flex; |
display: flex; |
||||||
justify-content: space-evenly; |
flex-direction: row; |
||||||
flex-wrap: nowrap; |
font-size: 2em; |
||||||
} |
} |
||||||
|
|
||||||
search-bar input#size { |
icons div input { |
||||||
width: 6ch; |
font-size: 1em; |
||||||
} |
} |
||||||
|
|
||||||
search-bar input#search { |
|
||||||
min-width: 30ch; |
|
||||||
max-wdith: 30ch; |
|
||||||
width: 30ch; |
|
||||||
} |
|
||||||
|
|
||||||
search-bar span { |
|
||||||
padding-right: 1rem; |
|
||||||
} |
|
||||||
|
|
||||||
@media only screen and (max-width: 900px) { |
|
||||||
icons { |
|
||||||
grid-template-columns: repeat(4, 1fr); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
@media only screen and (max-width: 600px) { |
|
||||||
icons { |
|
||||||
grid-template-columns: repeat(3, 1fr); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
</style> |
</style> |
||||||
|
|
||||||
<search-bar> |
<icons> |
||||||
<span on:click={ () => inactive = !inactive }><Icon name={ inactive ? 'eye' : 'eye-off'} size="24" /></span> |
<div>size: <input name="size" bind:value={ size } /></div> |
||||||
<input bind:value={ search } id="search" > <Icon name="x" size="24" /> <input bind:value={ size } id="size" > |
<div>fill: <input name="fill" bind:value={ fill } /></div> |
||||||
<span>{ message }</span> |
<div>width: <input name="width" bind:value={ width } /></div> |
||||||
</search-bar> |
<div>color: <input name="color" bind:value={ color } /></div> |
||||||
|
<div>shadow: <input name="shadow" type="checkbox" bind:checked={ shadow } /></div> |
||||||
<icons class:tight={ tight }> |
<div>tooltip: <input name="tooltip" bind:value={ tooltip } /></div> |
||||||
{#each icons as name} |
<div>tip_position: <input name="tip_position" bind:value={ tip_position } /></div> |
||||||
<icon on:click={ () => gen_code(name) }> |
<Icon name="keyboard" color={color} size={size} fill={fill} width={width} shadow={shadow} tooltip={tooltip} tip_position={tip_position} /> |
||||||
<Icon name={ name } size={ size } inactive={inactive}/> |
<Icon name="alarm-clock" color={color} size={size} fill={fill} width={width} shadow={shadow} tooltip={tooltip} tip_position={tip_position} /> |
||||||
{#if labels} |
<Icon name="activity" color={color} size={size} fill={fill} width={width} shadow={shadow} tooltip={tooltip} tip_position={tip_position} /> |
||||||
<span>{ name }</span> |
<Icon name="apple" color={color} size={size} fill={fill} width={width} shadow={shadow} tooltip={tooltip} tip_position={tip_position} /> |
||||||
{/if} |
<Icon name="angry" color={color} size={size} fill={fill} width={width} shadow={shadow} tooltip={tooltip} tip_position={tip_position} /> |
||||||
</icon> |
<Icon name="anchor" color={color} size={size} fill={fill} width={width} shadow={shadow} tooltip={tooltip} tip_position={tip_position} /> |
||||||
{:else} |
|
||||||
<h1>No Icons</h1> |
|
||||||
{/each} |
|
||||||
</icons> |
</icons> |
||||||
|
|
||||||
|
<hr> |
||||||
|
<a href="/admin/#/icons"><button type="button">See all icons and search them.</button></a> |
||||||
|
@ -0,0 +1,5 @@ |
|||||||
|
# Icons by <a href="https://lucide.dev">lucide</a> |
||||||
|
|
||||||
|
The Bandolier includes the great icon collection from <a href="https://lucide.dev">lucide</a> to get you started. Probably every icon you could possibly need is in this collection, and there's a nice Icon Finder tool to find what you need at <a href="/admin/#/icons/">/admin/#/icons/</a>. |
||||||
|
|
||||||
|
Using `Icon` is very simple. You find the name, and can set a size, whether it's inactive or not, and a few other options to control the appearance. In the Icon Finder you can click on an icon to copy the code for it. |
Loading…
Reference in new issue