diff --git a/src/atoms/IconGlobe.svelte b/src/atoms/IconGlobe.svelte index cb1c752..ac0d28e 100644 --- a/src/atoms/IconGlobe.svelte +++ b/src/atoms/IconGlobe.svelte @@ -8,19 +8,7 @@ const randomId2 = fn.randomString(6, 'A') - - - + diff --git a/src/atoms/IconGlobeSmall.svelte b/src/atoms/IconGlobeSmall.svelte index 25c6ffa..6e6c29d 100644 --- a/src/atoms/IconGlobeSmall.svelte +++ b/src/atoms/IconGlobeSmall.svelte @@ -8,19 +8,7 @@ const randomId2 = fn.randomString(6, 'A') - - - + diff --git a/src/style/atoms/_icon-globe.scss b/src/style/atoms/_icon-globe.scss new file mode 100644 index 0000000..f0548ef --- /dev/null +++ b/src/style/atoms/_icon-globe.scss @@ -0,0 +1,20 @@ +// SVG Globe icon +.icon-svg { + height: 100%; + overflow: hidden; + + &:after { + content: ""; + display: block; + padding-bottom: 133.93%; /* 1.33 ratio */ + } + + // Small size + &--small { + &:after { + content: ""; + display: block; + padding-bottom: 100%; /* 1:1 ratio */ + } + } +} diff --git a/src/style/style.scss b/src/style/style.scss index 063f6d7..830af6a 100644 --- a/src/style/style.scss +++ b/src/style/style.scss @@ -17,6 +17,7 @@ @import "atoms/button"; @import "atoms/button-outline"; @import "atoms/button-control"; +@import "atoms/icon-globe"; @import "atoms/toggle"; @import "atoms/link"; @import "atoms/switcher";