Use classes for SVG globe icons

This commit is contained in:
2020-03-03 10:54:24 +01:00
parent a0bb53db62
commit 455f3d65de
4 changed files with 23 additions and 26 deletions

View File

@@ -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>

View File

@@ -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>