parent
17e05130e3
commit
7c6c810efc
@ -1,114 +1,46 @@ |
||||
<script> |
||||
import Icon from "$/client/components/Icon.svelte"; |
||||
import { onMount } from "svelte"; |
||||
import api from "$/client/api.js"; |
||||
import { log } from "$/client/logging.js"; |
||||
|
||||
let all_icons = []; |
||||
let inactive = false; |
||||
let icons = []; |
||||
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); |
||||
} |
||||
}); |
||||
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: 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; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
justify-content: center; |
||||
} |
||||
|
||||
search-bar { |
||||
icons div { |
||||
display: flex; |
||||
justify-content: space-evenly; |
||||
flex-wrap: nowrap; |
||||
flex-direction: row; |
||||
font-size: 2em; |
||||
} |
||||
|
||||
search-bar input#size { |
||||
width: 6ch; |
||||
icons div input { |
||||
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> |
||||
|
||||
<search-bar> |
||||
<span on:click={ () => inactive = !inactive }><Icon name={ inactive ? 'eye' : 'eye-off'} size="24" /></span> |
||||
<input bind:value={ search } id="search" > <Icon name="x" size="24" /> <input bind:value={ size } id="size" > |
||||
<span>{ message }</span> |
||||
</search-bar> |
||||
|
||||
<icons class:tight={ tight }> |
||||
{#each icons as name} |
||||
<icon on:click={ () => gen_code(name) }> |
||||
<Icon name={ name } size={ size } inactive={inactive}/> |
||||
{#if labels} |
||||
<span>{ name }</span> |
||||
{/if} |
||||
</icon> |
||||
{:else} |
||||
<h1>No Icons</h1> |
||||
{/each} |
||||
<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> |
||||
|
@ -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