mirror of
https://seed.radicle.dev/rad:z4V1sjrXqjvFdnCUbxPFqd5p4DtH5.git
synced 2026-11-15 19:30:38 +08:00
Alexis Sellier
6b84e519d3
We give the option to fill icons when needed, otherwise the SVG is rendered "as-is". Signed-off-by: Alexis Sellier <self@cloudhead.io>
55 lines
3.9 KiB
Svelte
55 lines
3.9 KiB
Svelte
<script lang="ts">
|
|
export let name: string;
|
|
export let width: number | null = null;
|
|
export let height: number | null = null;
|
|
export let inline = false;
|
|
export let fill = false;
|
|
|
|
const icons = [
|
|
{
|
|
name: "twitter",
|
|
size: 24,
|
|
data: `<path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/>`
|
|
},
|
|
{
|
|
name: "github",
|
|
size: 24,
|
|
data: `<path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>`
|
|
},
|
|
{
|
|
name: "url",
|
|
size: 24,
|
|
data: `<path d="m 22.149137,10.881006 -4.50822,4.506674 c -2.488332,2.489875 -6.525018,2.489875 -9.0133491,0 C 8.2354124,14.997069 7.9288596,14.55666 7.6596044,14.102258 l 2.0946322,-2.094633 c 0.099595,-0.100392 0.2225451,-0.157959 0.3400174,-0.225634 0.144712,0.494888 0.397583,0.963282 0.786651,1.352302 1.242598,1.243393 3.264874,1.241849 4.506675,0 l 4.506675,-4.5066751 c 1.243394,-1.2433942 1.243394,-3.2648741 0,-4.5074715 -1.241851,-1.2425972 -3.26328,-1.2425972 -4.506675,0 L 13.784698,5.7245722 C 12.484535,5.2180323 11.083184,5.0818859 9.7191796,5.2818228 L 13.134194,1.8668091 c 2.489875,-2.4890788 6.525017,-2.4890788 9.014892,0 2.488384,2.4891784 2.488384,6.5251176 5.1e-5,9.0141969 z m -11.917939,7.410517 -1.6036301,1.604425 c -1.2425972,1.241852 -3.2648738,1.241852 -4.5074712,0 -1.2425974,-1.243393 -1.2425974,-3.264875 0,-4.508218 l 4.5074712,-4.506675 c 1.2433943,-1.2433946 3.2640781,-1.2433946 4.5066761,0 0.388269,0.388272 0.641141,0.856666 0.787447,1.350757 0.118269,-0.06847 0.239676,-0.124494 0.339271,-0.224088 L 16.355594,9.9138881 C 16.087933,9.4579417 15.779785,9.0190766 15.38763,8.6277177 c -2.488331,-2.4890788 -6.5250181,-2.4890788 -9.0141462,0 L 1.8668091,13.134392 c -2.4890788,2.489875 -2.4890788,6.525018 0,9.014894 2.489079,2.488332 6.5250179,2.488332 9.0141469,0 l 3.415809,-3.415811 c -1.364801,0.200735 -2.766151,0.0638 -4.065567,-0.441952 z"/>`
|
|
},
|
|
{
|
|
name: "ellipsis",
|
|
size: 24,
|
|
data: `<path d="M7 12a2 2 0 1 1-4.001-.001A2 2 0 0 1 7 12zm12-2a2 2 0 1 0 .001 4.001A2 2 0 0 0 19 10zm-7 0a2 2 0 1 0 .001 4.001A2 2 0 0 0 12 10z"/>`
|
|
},
|
|
{
|
|
name: "fork",
|
|
size: 17,
|
|
data: `<circle cx="6.5" cy="13.5" r="2" stroke="#5555FF"/><circle cx="10.5" cy="2.5" r="2" stroke="#5555FF"/><circle cx="2.5" cy="2.5" r="2" stroke="#5555FF"/><path d="M6.5 11.5C6.5 7 2.5 8 2.5 5.5C2.5 3.9 2.5 4.66667 2.5 4" stroke="#5555FF"/><path d="M6.5 11.5C6.5 7 10.5 8 10.5 5.5C10.5 3.9 10.5 4.66667 10.5 4" stroke="#5555FF"/>`
|
|
}
|
|
];
|
|
const svg = icons.find(e => e.name === name);
|
|
</script>
|
|
|
|
<style>
|
|
svg.fill {
|
|
fill: currentColor;
|
|
}
|
|
svg.inline {
|
|
height: 1.6rem;
|
|
}
|
|
</style>
|
|
|
|
{#if svg}
|
|
<svg role="img" class={$$props.class} class:inline class:fill
|
|
width={width || "1rem"}
|
|
height={height || "1rem"}
|
|
viewBox="0 0 {svg.size} {svg.size}">
|
|
{@html svg.data}
|
|
</svg>
|
|
{/if}
|