Use classes for SVG globe icons
This commit is contained in:
@@ -8,19 +8,7 @@
|
||||
const randomId2 = fn.randomString(6, 'A')
|
||||
</script>
|
||||
|
||||
<style>
|
||||
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">
|
||||
<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">
|
||||
<defs>
|
||||
<ellipse id={randomId1} cx="31.5" cy="60.6" rx="24.5" ry="24.4"/>
|
||||
</defs>
|
||||
|
||||
@@ -8,19 +8,7 @@
|
||||
const randomId2 = fn.randomString(6, 'A')
|
||||
</script>
|
||||
|
||||
<style>
|
||||
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">
|
||||
<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">
|
||||
<defs>
|
||||
<circle id={randomId1} cx="28.1" cy="28" r="26.6"/>
|
||||
</defs>
|
||||
|
||||
20
src/style/atoms/_icon-globe.scss
Normal file
20
src/style/atoms/_icon-globe.scss
Normal 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 */
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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";
|
||||
|
||||
Reference in New Issue
Block a user