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:
Alexis Sellier
2022-01-18 11:01:58 +01:00
parent 1e470f9530
commit 6b84e519d3
3 changed files with 9 additions and 8 deletions
+3 -2
View File
@@ -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}">
+3 -3
View File
@@ -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>
+3 -3
View File
@@ -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>