mirror of
https://seed.radicle.dev/rad:z4V1sjrXqjvFdnCUbxPFqd5p4DtH5.git
synced 2026-11-15 19:30:38 +08:00
Make icon filling optional
We give the option to fill icons when needed, otherwise the SVG is rendered "as-is". Signed-off-by: Alexis Sellier <self@cloudhead.io>
This commit is contained in:
+3
-2
@@ -3,6 +3,7 @@
|
||||
export let width: number | null = null;
|
||||
export let height: number | null = null;
|
||||
export let inline = false;
|
||||
export let fill = false;
|
||||
|
||||
const icons = [
|
||||
{
|
||||
@@ -35,7 +36,7 @@
|
||||
</script>
|
||||
|
||||
<style>
|
||||
svg {
|
||||
svg.fill {
|
||||
fill: currentColor;
|
||||
}
|
||||
svg.inline {
|
||||
@@ -44,7 +45,7 @@
|
||||
</style>
|
||||
|
||||
{#if svg}
|
||||
<svg role="img" class={$$props.class} class:inline
|
||||
<svg role="img" class={$$props.class} class:inline class:fill
|
||||
width={width || "1rem"}
|
||||
height={height || "1rem"}
|
||||
viewBox="0 0 {svg.size} {svg.size}">
|
||||
|
||||
@@ -199,7 +199,7 @@
|
||||
{#if profile.url}
|
||||
<a class="url" href={profile.url}>
|
||||
<span class="mobile">
|
||||
<Icon name="url" inline />
|
||||
<Icon name="url" fill inline />
|
||||
</span>
|
||||
<span class="desktop">
|
||||
{profile.url}
|
||||
@@ -208,12 +208,12 @@
|
||||
{/if}
|
||||
{#if profile.twitter}
|
||||
<a class="url" href="https://twitter.com/{profile.twitter}">
|
||||
<Icon name="twitter" inline />
|
||||
<Icon name="twitter" fill inline />
|
||||
</a>
|
||||
{/if}
|
||||
{#if profile.github}
|
||||
<a class="url" href="https://github.com/{profile.github}">
|
||||
<Icon name="github" inline />
|
||||
<Icon name="github" fill inline />
|
||||
</a>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
@@ -142,7 +142,7 @@
|
||||
<div class="links">
|
||||
{#if profile.url}
|
||||
<a class="url mobile" href={profile.url}>
|
||||
<Icon name="url" inline />
|
||||
<Icon name="url" fill inline />
|
||||
</a>
|
||||
<a class="url desktop" href={profile.url}>
|
||||
{profile.url}
|
||||
@@ -150,12 +150,12 @@
|
||||
{/if}
|
||||
{#if profile.twitter}
|
||||
<a class="url" href="https://twitter.com/{profile.twitter}">
|
||||
<Icon name="twitter" inline />
|
||||
<Icon name="twitter" fill inline />
|
||||
</a>
|
||||
{/if}
|
||||
{#if profile.github}
|
||||
<a class="url" href="https://github.com/{profile.github}">
|
||||
<Icon name="github" inline />
|
||||
<Icon name="github" fill inline />
|
||||
</a>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user