| |
<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;
|
| + |
import { unreachable } from "@app/utils";
|
| |
|
| - |
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: 16,
|
| - |
offset: { x: -1, y: 0 },
|
| - |
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"/>`
|
| - |
},
|
| - |
{
|
| - |
name: "browse",
|
| - |
size: 16,
|
| - |
data: `<path fill-rule="evenodd" d="M4.72 3.22a.75.75 0 011.06 1.06L2.06 8l3.72 3.72a.75.75 0 11-1.06 1.06L.47 8.53a.75.75 0 010-1.06l4.25-4.25zm6.56 0a.75.75 0 10-1.06 1.06L13.94 8l-3.72 3.72a.75.75 0 101.06 1.06l4.25-4.25a.75.75 0 000-1.06l-4.25-4.25z"></path>`
|
| - |
},
|
| - |
{
|
| - |
name: "chevron",
|
| - |
size: 15,
|
| - |
offset: { x: 0, y: 1 },
|
| - |
data: `<path fill-rule="evenodd" d="M12.78 6.22a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06 0L3.22 7.28a.75.75 0 011.06-1.06L8 9.94l3.72-3.72a.75.75 0 011.06 0z"></path>`
|
| - |
},
|
| - |
{
|
| - |
name: "clipboard-small",
|
| - |
size: 12,
|
| - |
offset: { x: -1, y: 1 },
|
| - |
data: `<svg width="12" height="12" viewBox="0 0 12 12" stroke="currentColor" xmlns="http://www.w3.org/2000/svg"><line x1="3.5" y1="1" x2="3.5" y2="10"/><line x1="6.5" y1="1" x2="6.5" y2="4"/><line x1="9.5" y1="5" x2="9.5" y2="10"/><line x1="7" y1="1.5" x2="4" y2="1.5"/><line x1="9.64645" y1="4.35355" x2="6.64644" y2="1.35355"/><line x1="10" y1="9.5" x2="4" y2="9.5"/><line x1="10" y1="4.5" x2="6" y2="4.5"/><line x1="1.5" y1="4" x2="1.5" y2="12"/><line x1="7" y1="11.5" x2="1" y2="11.5"/></svg>`
|
| - |
},
|
| - |
{
|
| - |
name: "clipboard",
|
| - |
size: 16,
|
| - |
data: `<svg width="16" height="16" viewBox="0 0 16 16" stroke="currentColor" xmlns="http://www.w3.org/2000/svg"><line x1="4.5" y1="1" x2="4.5" y2="13"/><line x1="9.5" y1="1" x2="9.5" y2="4"/><line x1="12.5" y1="5" x2="12.5" y2="13"/><line x1="9" y1="1.5" x2="5" y2="1.5"/><line x1="12.6464" y1="4.35355" x2="9.64644" y2="1.35355"/><line x1="12" y1="12.5" x2="5" y2="12.5"/><line x1="13" y1="4.5" x2="9" y2="4.5"/><line x1="2.5" y1="4" x2="2.5" y2="15"/><line x1="10" y1="14.5" x2="2" y2="14.5"/></svg>`
|
| - |
}
|
| - |
];
|
| - |
const svg = icons.find(e => e.name === name);
|
| + |
export let name:
|
| + |
| "browse"
|
| + |
| "clipboard"
|
| + |
| "clipboard-small"
|
| + |
| "ellipsis"
|
| + |
| "fork"
|
| + |
| "github"
|
| + |
| "twitter"
|
| + |
| "url";
|
| |
</script>
|
| |
|
| |
<style>
|
| |
svg {
|
| - |
fill: transparent;
|
| - |
}
|
| - |
svg.fill {
|
| - |
fill: currentColor;
|
| - |
}
|
| - |
span.inline, svg.inline {
|
| - |
height: 1.6rem;
|
| - |
}
|
| - |
svg.clickable {
|
| - |
cursor: pointer;
|
| - |
}
|
| - |
span {
|
| - |
display: inline-flex;
|
| - |
align-items: center;
|
| - |
justify-content: center;
|
| + |
display: flex;
|
| + |
flex-shrink: 0;
|
| |
}
|
| |
</style>
|
| |
|
| - |
{#if svg}
|
| - |
<span on:click class:inline style:height={`${height}px`} style:width={`${width}px`}>
|
| - |
<svg role="img" class={$$props.class} class:inline class:fill
|
| - |
width={width || "1rem"}
|
| - |
height={height || "1rem"}
|
| - |
viewBox="{svg.offset?.x || 0} {svg.offset?.y || 0} {svg.size} {svg.size}">
|
| - |
{@html svg.data}
|
| - |
</svg>
|
| - |
</span>
|
| - |
{/if}
|
| + |
<svg
|
| + |
role="img"
|
| + |
on:click
|
| + |
height="24"
|
| + |
width="24"
|
| + |
fill="currentColor"
|
| + |
viewBox="0 0 24 24">
|
| + |
{#if name === "browse"}
|
| + |
<path d="M8.46934 7.23871C8.61151 7.10623 8.79956 7.03411 8.99386
|
| + |
7.03753C9.18816 7.04096 9.37355 7.11967 9.51096 7.25709C9.64838 7.3945
|
| + |
9.72709 7.57988 9.73052 7.77419C9.73394 7.96849 9.66182 8.15653 9.52934
|
| + |
8.29871L5.80934 12.0187L9.52934 15.7387C9.60303 15.8074 9.66213 15.8902
|
| + |
9.70312 15.9822C9.74411 16.0742 9.76615 16.1735 9.76793 16.2742C9.76971
|
| + |
16.3749 9.75118 16.4749 9.71346 16.5683C9.67574 16.6617 9.6196 16.7465
|
| + |
9.54838 16.8177C9.47716 16.889 9.39233 16.9451 9.29894 16.9828C9.20555
|
| + |
17.0206 9.10552 17.0391 9.00482 17.0373C8.90411 17.0355 8.8048 17.0135
|
| + |
8.7128 16.9725C8.6208 16.9315 8.538 16.8724 8.46934 16.7987L4.21934
|
| + |
12.5487C4.07889 12.4081 4 12.2175 4 12.0187C4 11.82 4.07889 11.6293 4.21934
|
| + |
11.4887L8.46934 7.23871V7.23871ZM15.0293 7.23871C14.9607 7.16502 14.8779
|
| + |
7.10592 14.7859 7.06493C14.6939 7.02394 14.5946 7.00189 14.4939
|
| + |
7.00012C14.3932 6.99834 14.2931 7.01686 14.1997 7.05459C14.1064 7.09231
|
| + |
14.0215 7.14845 13.9503 7.21967C13.8791 7.29089 13.8229 7.37572 13.7852
|
| + |
7.46911C13.7475 7.5625 13.729 7.66253 13.7307 7.76323C13.7325 7.86393
|
| + |
13.7546 7.96325 13.7956 8.05525C13.8366 8.14725 13.8957 8.23005 13.9693
|
| + |
8.29871L17.6893 12.0187L13.9693 15.7387C13.8957 15.8074 13.8366 15.8902
|
| + |
13.7956 15.9822C13.7546 16.0742 13.7325 16.1735 13.7307 16.2742C13.729
|
| + |
16.3749 13.7475 16.4749 13.7852 16.5683C13.8229 16.6617 13.8791 16.7465
|
| + |
13.9503 16.8177C14.0215 16.889 14.1064 16.9451 14.1997 16.9828C14.2931
|
| + |
17.0206 14.3932 17.0391 14.4939 17.0373C14.5946 17.0355 14.6939 17.0135
|
| + |
14.7859 16.9725C14.8779 16.9315 14.9607 16.8724 15.0293 16.7987L19.2793
|
| + |
12.5487C19.4198 12.4081 19.4987 12.2175 19.4987 12.0187C19.4987 11.82
|
| + |
19.4198 11.6293 19.2793 11.4887L15.0293 7.23871V7.23871Z" />
|
| + |
{:else if name === "clipboard"}
|
| + |
<path d="M9 5H14.7071L18 8.29289V17H9V5ZM10 6V16H17V9H14V6H10ZM15
|
| + |
6.70711L16.2929 8H15V6.70711ZM7 8H8V18H15V19H7V8Z" />
|
| + |
{:else if name === "clipboard-small"}
|
| + |
<path fill-rule="evenodd" clip-rule="evenodd" d="M14 7L17 10V16H10V7H14ZM13
|
| + |
8H11V15H16V11H13V8ZM14 8.41421V10H15.5858L14 8.41421ZM8
|
| + |
10H9V17H14V18H8V10Z" />
|
| + |
{:else if name === "ellipsis"}
|
| + |
<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"/>
|
| + |
{:else if name === "fork"}
|
| + |
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.34375 6.9375C7.5671
|
| + |
6.9375 6.9375 7.5671 6.9375 8.34375C6.9375 9.1204 7.5671 9.75 8.34375
|
| + |
9.75C9.1204 9.75 9.75 9.1204 9.75 8.34375C9.75 7.5671 9.1204 6.9375 8.34375
|
| + |
6.9375ZM8.8125 10.6406C9.8823 10.4235 10.6875 9.47764 10.6875
|
| + |
8.34375C10.6875 7.04933 9.63817 6 8.34375 6C7.04933 6 6 7.04933 6 8.34375C6
|
| + |
9.47764 6.8052 10.4235 7.875 10.6406V11.1562C7.875 11.8999 8.18601 12.4028
|
| + |
8.62101 12.7834C8.82767 12.9643 9.06032 13.1164 9.28665 13.2541C9.39277
|
| + |
13.3187 9.48974 13.3756 9.5849 13.4316C9.71089 13.5056 9.83369 13.5777
|
| + |
9.97031 13.6631C10.4167 13.9421 10.8179 14.2499 11.1146 14.7072C11.3641
|
| + |
15.0919 11.5582 15.6119 11.6108 16.3623C10.5481 16.5849 9.75 17.5274 9.75
|
| + |
18.6562C9.75 19.9507 10.7993 21 12.0938 21C13.3882 21 14.4375 19.9507
|
| + |
14.4375 18.6562C14.4375 17.5274 13.6394 16.5849 12.5766 16.3623C12.6293
|
| + |
15.6119 12.8234 15.0919 13.073 14.7072C13.3696 14.2499 13.7709 13.9421
|
| + |
14.2172 13.6631C14.3538 13.5777 14.4766 13.5056 14.6026 13.4316C14.6978
|
| + |
13.3756 14.7947 13.3187 14.9008 13.2541C15.1272 13.1164 15.3598 12.9643
|
| + |
15.5665 12.7834C16.0015 12.4028 16.3125 11.8999 16.3125
|
| + |
11.1562V10.6406C17.3823 10.4235 18.1875 9.47764 18.1875 8.34375C18.1875
|
| + |
7.04933 17.1382 6 15.8438 6C14.5493 6 13.5 7.04933 13.5 8.34375C13.5
|
| + |
9.47764 14.3052 10.4235 15.375 10.6406V11.1562C15.375 11.5845 15.2173
|
| + |
11.8433 14.9491 12.0779C14.8042 12.2047 14.6267 12.3235 14.4136
|
| + |
12.4532C14.3363 12.5002 14.2463 12.5532 14.1515 12.6091C14.0098 12.6926
|
| + |
13.8574 12.7824 13.7203 12.8681C13.2292 13.1751 12.6929 13.5705 12.2864
|
| + |
14.1971C12.2176 14.3032 12.1532 14.4147 12.0938 14.5323C12.0343 14.4147
|
| + |
11.9699 14.3032 11.9011 14.1971C11.4946 13.5705 10.9583 13.1751 10.4672
|
| + |
12.8681C10.3301 12.7824 10.1776 12.6926 10.036 12.6091C9.94121 12.5532
|
| + |
9.85123 12.5002 9.77389 12.4532C9.56077 12.3235 9.38326 12.2047 9.23836
|
| + |
12.0779C8.97024 11.8433 8.8125 11.5845 8.8125 11.1562V10.6406ZM15.8438
|
| + |
9.75C16.6204 9.75 17.25 9.1204 17.25 8.34375C17.25 7.5671 16.6204 6.9375
|
| + |
15.8438 6.9375C15.0671 6.9375 14.4375 7.5671 14.4375 8.34375C14.4375 9.1204
|
| + |
15.0671 9.75 15.8438 9.75ZM12.0938 17.25C11.3171 17.25 10.6875 17.8796
|
| + |
10.6875 18.6562C10.6875 19.4329 11.3171 20.0625 12.0938 20.0625C12.8704
|
| + |
20.0625 13.5 19.4329 13.5 18.6562C13.5 17.8796 12.8704 17.25 12.0938
|
| + |
17.25Z" />
|
| + |
{:else if name === "github"}
|
| + |
<path d="M12 4C7.58 4 4 7.67295 4 12.2031C4 15.8282 6.292 18.9023 9.47
|
| + |
19.9858C9.87 20.0631 10.0167 19.8095 10.0167 19.5914C10.0167 19.3966 10.01
|
| + |
18.8805 10.0067 18.1969C7.78133 18.6918 7.312 17.0963 7.312 17.0963C6.948
|
| + |
16.1495 6.422 15.8966 6.422 15.8966C5.69733 15.388 6.478 15.3982 6.478
|
| + |
15.3982C7.28133 15.4557 7.70333 16.2432 7.70333 16.2432C8.41667 17.4975
|
| + |
9.576 17.1352 10.0333 16.9254C10.1053 16.3949 10.3113 16.0333 10.54
|
| + |
15.8282C8.76333 15.6231 6.896 14.9177 6.896 11.7745C6.896 10.879 7.206
|
| + |
10.1476 7.71933 9.57334C7.62933 9.36621 7.35933 8.53222 7.78933
|
| + |
7.40224C7.78933 7.40224 8.45933 7.18213 9.98933 8.24306C10.6293 8.06054
|
| + |
11.3093 7.97031 11.9893 7.96621C12.6693 7.97031 13.3493 8.06054 13.9893
|
| + |
8.24306C15.5093 7.18213 16.1793 7.40224 16.1793 7.40224C16.6093 8.53222
|
| + |
16.3393 9.36621 16.2593 9.57334C16.7693 10.1476 17.0793 10.879 17.0793
|
| + |
11.7745C17.0793 14.9259 15.2093 15.6197 13.4293 15.8214C13.7093 16.0675
|
| + |
13.9693 16.5706 13.9693 17.339C13.9693 18.4368 13.9593 19.3186 13.9593
|
| + |
19.5852C13.9593 19.8006 14.0993 20.0569 14.5093 19.9749C17.71 18.8989 20
|
| + |
15.8227 20 12.2031C20 7.67295 16.418 4 12 4" />
|
| + |
{:else if name === "url"}
|
| + |
<path d="M18.7566 11.2493L15.7531 14.2518C14.0953 15.9107 11.4059 15.9107
|
| + |
9.74803 14.2518C9.48676 13.9916 9.28252 13.6982 9.10313 13.3954L10.4987
|
| + |
11.9999C10.565 11.933 10.6469 11.8947 10.7252 11.8496C10.8216 12.1793
|
| + |
10.9901 12.4914 11.2493 12.7505C12.0772 13.5789 13.4245 13.5779 14.2518
|
| + |
12.7505L17.2543 9.74802C18.0827 8.91963 18.0827 7.57285 17.2543
|
| + |
6.74499C16.427 5.91713 15.0802 5.91713 14.2518 6.74499L13.1839
|
| + |
7.81391C12.3177 7.47644 11.3841 7.38573 10.4753 7.51894L12.7505
|
| + |
5.24373C14.4094 3.58542 17.0977 3.58542 18.7566 5.24373C20.4145 6.90211
|
| + |
20.4145 9.591 18.7566 11.2493ZM10.8164 16.1865L9.74803 17.2554C8.92016
|
| + |
18.0828 7.57284 18.0828 6.74497 17.2554C5.9171 16.427 5.9171 15.0802
|
| + |
6.74497 14.2519L9.74803 11.2493C10.5764 10.421 11.9227 10.421 12.7506
|
| + |
11.2493C13.0092 11.508 13.1777 11.8201 13.2752 12.1493C13.354 12.1036
|
| + |
13.4349 12.0663 13.5012 12L14.8967 10.605C14.7184 10.3012 14.5131 10.0088
|
| + |
14.2518 9.74809C12.594 8.08978 9.90462 8.08978 8.24627 9.74809L5.24374
|
| + |
12.7506C3.58542 14.4094 3.58542 17.0978 5.24374 18.7566C6.90207 20.4145
|
| + |
9.59097 20.4145 11.2493 18.7566L13.5251 16.4809C12.6158 16.6146 11.6822
|
| + |
16.5234 10.8164 16.1865Z"/>
|
| + |
{:else if name === "twitter"}
|
| + |
<path d="M19.9687 7.54849C19.3697 7.81214 18.7351 7.98617 18.0853
|
| + |
8.06498C18.7694 7.65395 19.2816 7.00936 19.5273 6.25025C18.8933 6.62013
|
| + |
18.1907 6.88937 17.4427 7.03932C16.9492 6.51179 16.2952 6.1619 15.5824
|
| + |
6.04399C14.8696 5.92608 14.1378 6.04675 13.5006 6.38727C12.8635 6.72778
|
| + |
12.3566 7.26908 12.0587 7.92711C11.7608 8.58514 11.6886 9.32307 11.8533
|
| + |
10.0263C9.12667 9.8977 6.71133 8.58814 5.09333 6.61013C4.7992 7.10984
|
| + |
4.64578 7.67979 4.64933 8.25958C4.64933 9.3992 5.22933 10.4009 6.108
|
| + |
10.9893C5.58724 10.9728 5.07798 10.832 4.62267 10.5788V10.6188C4.62237
|
| + |
11.3761 4.88418 12.1103 5.36367 12.6966C5.84316 13.283 6.51081 13.6854
|
| + |
7.25333 13.8357C6.7722 13.9646 6.26828 13.984 5.77867 13.8924C5.98941
|
| + |
14.5442 6.39844 15.1139 6.94868 15.5222C7.49891 15.9304 8.1629 16.1567
|
| + |
8.848 16.1696C7.68769 17.0799 6.25498 17.574 4.78 17.5725C4.52 17.5725
|
| + |
4.26067 17.5571 4 17.5278C5.50381 18.4904 7.25234 19.0013 9.038 19C15.0733
|
| + |
19 18.37 14.0043 18.37 9.67978C18.37 9.53982 18.37 9.39987 18.36
|
| + |
9.25992C19.004 8.79665 19.5595 8.22147 20 7.56182L19.9687 7.54849Z"/>
|
| + |
{:else}
|
| + |
{unreachable(name)}
|
| + |
{/if}
|
| + |
</svg>
|