flayks/housesof
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Use classes for SVG globe icons

Browse Source
This commit is contained in:
Félix Péault
2020-03-03 10:54:24 +01:00
parent a0bb53db62
commit 455f3d65de
4 changed files with 23 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/atoms/IconGlobe.svelte
View File

@@ -8,19 +8,7 @@
const randomId2 = fn.randomString(6, 'A') const randomId2 = fn.randomString(6, 'A')
</script> </script>
<style> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" {width} fill={color} viewBox="0 0 56 75" class="icon-globe">
svg {
height: 100%;
overflow: hidden;
}
svg:after {
content: "";
display: block;
padding-bottom: 133.93%; /* 1.33 ratio */
}
</style>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" {width} fill={color} viewBox="0 0 56 75">
<defs> <defs>
<ellipse id={randomId1} cx="31.5" cy="60.6" rx="24.5" ry="24.4"/> <ellipse id={randomId1} cx="31.5" cy="60.6" rx="24.5" ry="24.4"/>
</defs> </defs>

14
src/atoms/IconGlobeSmall.svelte
View File

@@ -8,19 +8,7 @@
const randomId2 = fn.randomString(6, 'A') const randomId2 = fn.randomString(6, 'A')
</script> </script>
<style> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" {width} fill={color} viewBox="0 0 56 56" class="icon-globe icon-globe--small">
svg {
height: 100%;
overflow: hidden;
}
svg:after {
content: "";
display: block;
padding-bottom: 100%; /* 1:1 ratio */
}
</style>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" {width} fill={color} viewBox="0 0 56 56">
<defs> <defs>
<circle id={randomId1} cx="28.1" cy="28" r="26.6"/> <circle id={randomId1} cx="28.1" cy="28" r="26.6"/>
</defs> </defs>

20
src/style/atoms/_icon-globe.scss Normal file
View File

@@ -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 */
}
}
}

1
src/style/style.scss
View File

@@ -17,6 +17,7 @@
@import "atoms/button"; @import "atoms/button";
@import "atoms/button-outline"; @import "atoms/button-outline";
@import "atoms/button-control"; @import "atoms/button-control";
@import "atoms/icon-globe";
@import "atoms/toggle"; @import "atoms/toggle";
@import "atoms/link"; @import "atoms/link";
@import "atoms/switcher"; @import "atoms/switcher";