Skip to content

Commit

Permalink
Merge pull request #146 from verdulife/svg-best-practices
Browse files Browse the repository at this point in the history 
fix: Add role and aria-label to all SVG's
  • Loading branch information
@midudev
midudev authored Feb 27, 2024
2 parents 44bfcaa + 6c087a5 commit fac9694
Show file tree
Hide file tree
Showing 9 changed files with 296 additions and 265 deletions.
4 changes: 2 additions & 2 deletions src/components/HeroLogo.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@
fill="none"
viewBox="0 0 800 579"
role="img"
aria-label="Logotipo de la Velada 4"
><title>Logotipo de la Velada 4</title>
aria-label="Logotipo de La Velada 4"
>
<path
id="logo"
fill="currentColor"
Expand Down
201 changes: 101 additions & 100 deletions src/icons/boxing-gloves.astro
View file

Large diffs are not rendered by default.

29 changes: 16 additions & 13 deletions src/icons/instagram.astro
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,18 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="48"
height="48"
fill="none"
viewBox="0 0 48 48"
class={Astro.props.class}
><path
fill="currentColor"
d="M24.016 9.242c4.8 0 5.392.03 7.262.093 1.745.094 2.712.374 3.335.623.842.312 1.434.717 2.057 1.34.623.624 1.029 1.216 1.34 2.058.25.623.53 1.59.624 3.335.093 1.901.093 2.462.093 7.262 0 4.8-.03 5.393-.093 7.263-.094 1.745-.374 2.711-.624 3.335-.311.841-.716 1.433-1.34 2.057-.623.623-1.215 1.028-2.057 1.34-.623.25-1.59.53-3.335.623-1.901.094-2.462.094-7.262.094-4.8 0-5.393-.031-7.263-.094-1.745-.093-2.711-.374-3.335-.623-.841-.312-1.434-.717-2.057-1.34-.623-.624-1.029-1.216-1.34-2.057-.25-.624-.53-1.59-.624-3.335-.093-1.902-.093-2.463-.093-7.263s.031-5.392.093-7.262c.094-1.745.374-2.712.624-3.335.311-.842.717-1.434 1.34-2.057.623-.624 1.216-1.029 2.057-1.34.624-.25 1.59-.53 3.335-.624 1.87-.062 2.463-.093 7.263-.093Zm0-3.242c-4.894 0-5.517.031-7.419.094-1.9.093-3.21.405-4.363.841a8.936 8.936 0 0 0-3.18 2.088 8.629 8.629 0 0 0-2.119 3.18c-.436 1.153-.748 2.462-.841 4.363C6.03 18.5 6 19.122 6 24.016c0 4.893.031 5.517.094 7.418.093 1.901.405 3.21.841 4.363a8.936 8.936 0 0 0 2.088 3.18 8.936 8.936 0 0 0 3.18 2.088c1.153.436 2.462.748 4.363.842C18.5 42 19.091 42 23.984 42c4.894 0 5.517-.031 7.419-.093 1.9-.094 3.21-.406 4.363-.842a8.936 8.936 0 0 0 3.18-2.088 8.938 8.938 0 0 0 2.088-3.18c.436-1.153.748-2.462.841-4.363.094-1.933.094-2.525.094-7.418 0-4.894-.031-5.517-.094-7.419-.093-1.9-.405-3.21-.841-4.363a8.937 8.937 0 0 0-2.088-3.18 8.936 8.936 0 0 0-3.18-2.088c-1.153-.436-2.462-.748-4.363-.841C29.5 6.03 28.909 6 24.016 6Z"
></path><path
fill="currentColor"
d="M24.015 14.758a9.258 9.258 0 0 0 0 18.515 9.258 9.258 0 0 0 0-18.515Zm0 15.242A6.02 6.02 0 0 1 18 23.984a6.02 6.02 0 0 1 6.015-6.015c3.335 0 5.985 2.711 5.985 6.046A5.986 5.986 0 0 1 24.015 30ZM33.615 16.535a2.15 2.15 0 1 0 0-4.301 2.15 2.15 0 0 0 0 4.3Z"
></path></svg
xmlns="http://www.w3.org/2000/svg"
width="48"
height="48"
fill="none"
viewBox="0 0 48 48"
class={Astro.props.class}
role="img"
aria-label="Logotipo de Instagram"
>
<path
fill="currentColor"
d="M24.016 9.242c4.8 0 5.392.03 7.262.093 1.745.094 2.712.374 3.335.623.842.312 1.434.717 2.057 1.34.623.624 1.029 1.216 1.34 2.058.25.623.53 1.59.624 3.335.093 1.901.093 2.462.093 7.262 0 4.8-.03 5.393-.093 7.263-.094 1.745-.374 2.711-.624 3.335-.311.841-.716 1.433-1.34 2.057-.623.623-1.215 1.028-2.057 1.34-.623.25-1.59.53-3.335.623-1.901.094-2.462.094-7.262.094-4.8 0-5.393-.031-7.263-.094-1.745-.093-2.711-.374-3.335-.623-.841-.312-1.434-.717-2.057-1.34-.623-.624-1.029-1.216-1.34-2.057-.25-.624-.53-1.59-.624-3.335-.093-1.902-.093-2.463-.093-7.263s.031-5.392.093-7.262c.094-1.745.374-2.712.624-3.335.311-.842.717-1.434 1.34-2.057.623-.624 1.216-1.029 2.057-1.34.624-.25 1.59-.53 3.335-.624 1.87-.062 2.463-.093 7.263-.093Zm0-3.242c-4.894 0-5.517.031-7.419.094-1.9.093-3.21.405-4.363.841a8.936 8.936 0 0 0-3.18 2.088 8.629 8.629 0 0 0-2.119 3.18c-.436 1.153-.748 2.462-.841 4.363C6.03 18.5 6 19.122 6 24.016c0 4.893.031 5.517.094 7.418.093 1.901.405 3.21.841 4.363a8.936 8.936 0 0 0 2.088 3.18 8.936 8.936 0 0 0 3.18 2.088c1.153.436 2.462.748 4.363.842C18.5 42 19.091 42 23.984 42c4.894 0 5.517-.031 7.419-.093 1.9-.094 3.21-.406 4.363-.842a8.936 8.936 0 0 0 3.18-2.088 8.938 8.938 0 0 0 2.088-3.18c.436-1.153.748-2.462.841-4.363.094-1.933.094-2.525.094-7.418 0-4.894-.031-5.517-.094-7.419-.093-1.9-.405-3.21-.841-4.363a8.937 8.937 0 0 0-2.088-3.18 8.936 8.936 0 0 0-3.18-2.088c-1.153-.436-2.462-.748-4.363-.841C29.5 6.03 28.909 6 24.016 6Z"
></path><path
fill="currentColor"
d="M24.015 14.758a9.258 9.258 0 0 0 0 18.515 9.258 9.258 0 0 0 0-18.515Zm0 15.242A6.02 6.02 0 0 1 18 23.984a6.02 6.02 0 0 1 6.015-6.015c3.335 0 5.985 2.711 5.985 6.046A5.986 5.986 0 0 1 24.015 30ZM33.615 16.535a2.15 2.15 0 1 0 0-4.301 2.15 2.15 0 0 0 0 4.3Z"
></path>
</svg>
23 changes: 13 additions & 10 deletions src/icons/la-velada.astro
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,15 @@
<svg
class={Astro.props.class}
xmlns="http://www.w3.org/2000/svg"
width="206"
height="224"
fill="none"
viewBox="0 0 206 224"
><path
fill="currentColor"
d="m205.996 0-29.003 13.283c-6.286 2.882-12.285 6.252-17.825 10.017-12.453 8.47-23.597 20.593-32.23 35.072l-14.222 24.136-9.711-14.732-9.71 14.732-14.223-24.136v-.01C70.434 43.892 59.29 31.771 46.842 23.3c-5.54-3.765-11.534-7.136-17.825-10.017L.004 0l73.84 112L.004 224l29.003-13.283c6.29-2.881 12.285-6.252 17.825-10.017 12.453-8.471 23.597-20.593 32.23-35.072l14.222-24.136 9.711 14.732 9.711-14.732 14.227 24.146c8.633 14.469 19.777 26.591 32.225 35.062 5.54 3.765 11.534 7.136 17.825 10.017L205.986 224l-73.839-112L205.996 0Zm-75.653 60.393c8.337-13.975 19.075-25.667 31.054-33.811 5.357-3.642 11.158-6.904 17.247-9.696L195.08 9.36l-65.296 99.042-14.642-22.208 15.206-25.8h-.005ZM27.357 16.886c6.088 2.787 11.89 6.049 17.246 9.696 11.974 8.144 22.713 19.836 31.05 33.806l15.205 25.806-14.642 22.208L10.92 9.36l16.437 7.526ZM103 149.024l-7.472-11.332 7.472-12.68 7.472 12.68L103 149.024Zm75.639 58.09a118.37 118.37 0 0 1-17.247-9.691c-11.974-8.144-22.712-19.836-31.044-33.806l-15.839-26.874-11.514-19.534-11.514 19.534-15.834 26.864c-8.336 13.975-19.075 25.667-31.049 33.811-5.356 3.642-11.158 6.904-17.246 9.691l-16.437 7.526 66.951-101.553 16.975-25.751 8.154-12.365 8.154 12.365 16.975 25.751 66.951 101.553-16.436-7.526v.005Z"
></path>
class={Astro.props.class}
xmlns="http://www.w3.org/2000/svg"
width="206"
height="224"
fill="none"
viewBox="0 0 206 224"
role="img"
aria-label="Isotipo de La Velada 4"
>
<path
fill="currentColor"
d="m205.996 0-29.003 13.283c-6.286 2.882-12.285 6.252-17.825 10.017-12.453 8.47-23.597 20.593-32.23 35.072l-14.222 24.136-9.711-14.732-9.71 14.732-14.223-24.136v-.01C70.434 43.892 59.29 31.771 46.842 23.3c-5.54-3.765-11.534-7.136-17.825-10.017L.004 0l73.84 112L.004 224l29.003-13.283c6.29-2.881 12.285-6.252 17.825-10.017 12.453-8.471 23.597-20.593 32.23-35.072l14.222-24.136 9.711 14.732 9.711-14.732 14.227 24.146c8.633 14.469 19.777 26.591 32.225 35.062 5.54 3.765 11.534 7.136 17.825 10.017L205.986 224l-73.839-112L205.996 0Zm-75.653 60.393c8.337-13.975 19.075-25.667 31.054-33.811 5.357-3.642 11.158-6.904 17.247-9.696L195.08 9.36l-65.296 99.042-14.642-22.208 15.206-25.8h-.005ZM27.357 16.886c6.088 2.787 11.89 6.049 17.246 9.696 11.974 8.144 22.713 19.836 31.05 33.806l15.205 25.806-14.642 22.208L10.92 9.36l16.437 7.526ZM103 149.024l-7.472-11.332 7.472-12.68 7.472 12.68L103 149.024Zm75.639 58.09a118.37 118.37 0 0 1-17.247-9.691c-11.974-8.144-22.712-19.836-31.044-33.806l-15.839-26.874-11.514-19.534-11.514 19.534-15.834 26.864c-8.336 13.975-19.075 25.667-31.049 33.811-5.356 3.642-11.158 6.904-17.246 9.691l-16.437 7.526 66.951-101.553 16.975-25.751 8.154-12.365 8.154 12.365 16.975 25.751 66.951 101.553-16.436-7.526v.005Z"
></path>
</svg>
19 changes: 16 additions & 3 deletions src/icons/map-marker.astro
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,16 @@
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg width="18" height="18" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none" class={Astro.props.class}>
<path fill="currentColor" fill-rule="evenodd" d="M11.291 21.706 12 21l-.709.706zM12 21l.708.706a1 1 0 0 1-1.417 0l-.006-.007-.017-.017-.062-.063a47.708 47.708 0 0 1-1.04-1.106 49.562 49.562 0 0 1-2.456-2.908c-.892-1.15-1.804-2.45-2.497-3.734C4.535 12.612 4 11.248 4 10c0-4.539 3.592-8 8-8 4.408 0 8 3.461 8 8 0 1.248-.535 2.612-1.213 3.87-.693 1.286-1.604 2.585-2.497 3.735a49.583 49.583 0 0 1-3.496 4.014l-.062.063-.017.017-.006.006L12 21zm0-8a3 3 0 1 0 0-6 3 3 0 0 0 0 6z" clip-rule="evenodd"/></svg>
<svg
width="18"
height="18"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
fill="none"
class={Astro.props.class}
role="img"
aria-label="Icono de localizacion"
>
<path
fill="currentColor"
fill-rule="evenodd"
d="M11.291 21.706 12 21l-.709.706zM12 21l.708.706a1 1 0 0 1-1.417 0l-.006-.007-.017-.017-.062-.063a47.708 47.708 0 0 1-1.04-1.106 49.562 49.562 0 0 1-2.456-2.908c-.892-1.15-1.804-2.45-2.497-3.734C4.535 12.612 4 11.248 4 10c0-4.539 3.592-8 8-8 4.408 0 8 3.461 8 8 0 1.248-.535 2.612-1.213 3.87-.693 1.286-1.604 2.585-2.497 3.735a49.583 49.583 0 0 1-3.496 4.014l-.062.063-.017.017-.006.006L12 21zm0-8a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"
clip-rule="evenodd"></path>
</svg>
21 changes: 12 additions & 9 deletions src/icons/moon.astro
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,14 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="48"
height="48"
fill="currentColor"
viewBox="0 0 256 256"
class={Astro.props.class}
><path
d="M233.54,142.23a8,8,0,0,0-8-2,88.08,88.08,0,0,1-109.8-109.8,8,8,0,0,0-10-10,104.84,104.84,0,0,0-52.91,37A104,104,0,0,0,136,224a103.09,103.09,0,0,0,62.52-20.88,104.84,104.84,0,0,0,37-52.91A8,8,0,0,0,233.54,142.23ZM188.9,190.34A88,88,0,0,1,65.66,67.11a89,89,0,0,1,31.4-26A106,106,0,0,0,96,56,104.11,104.11,0,0,0,200,160a106,106,0,0,0,14.92-1.06A89,89,0,0,1,188.9,190.34Z"
></path></svg
xmlns="http://www.w3.org/2000/svg"
width="48"
height="48"
fill="currentColor"
viewBox="0 0 256 256"
class={Astro.props.class}
role="img"
aria-label="Icono de tema oscuro"
>
<path
d="M233.54,142.23a8,8,0,0,0-8-2,88.08,88.08,0,0,1-109.8-109.8,8,8,0,0,0-10-10,104.84,104.84,0,0,0-52.91,37A104,104,0,0,0,136,224a103.09,103.09,0,0,0,62.52-20.88,104.84,104.84,0,0,0,37-52.91A8,8,0,0,0,233.54,142.23ZM188.9,190.34A88,88,0,0,1,65.66,67.11a89,89,0,0,1,31.4-26A106,106,0,0,0,96,56,104.11,104.11,0,0,0,200,160a106,106,0,0,0,14.92-1.06A89,89,0,0,1,188.9,190.34Z"
></path>
</svg>
21 changes: 12 additions & 9 deletions src/icons/sun.astro
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,14 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="48"
height="48"
fill="currentColor"
viewBox="0 0 256 256"
class={Astro.props.class}
><path
d="M120,40V16a8,8,0,0,1,16,0V40a8,8,0,0,1-16,0Zm72,88a64,64,0,1,1-64-64A64.07,64.07,0,0,1,192,128Zm-16,0a48,48,0,1,0-48,48A48.05,48.05,0,0,0,176,128ZM58.34,69.66A8,8,0,0,0,69.66,58.34l-16-16A8,8,0,0,0,42.34,53.66Zm0,116.68-16,16a8,8,0,0,0,11.32,11.32l16-16a8,8,0,0,0-11.32-11.32ZM192,72a8,8,0,0,0,5.66-2.34l16-16a8,8,0,0,0-11.32-11.32l-16,16A8,8,0,0,0,192,72Zm5.66,114.34a8,8,0,0,0-11.32,11.32l16,16a8,8,0,0,0,11.32-11.32ZM48,128a8,8,0,0,0-8-8H16a8,8,0,0,0,0,16H40A8,8,0,0,0,48,128Zm80,80a8,8,0,0,0-8,8v24a8,8,0,0,0,16,0V216A8,8,0,0,0,128,208Zm112-88H216a8,8,0,0,0,0,16h24a8,8,0,0,0,0-16Z"
></path>
xmlns="http://www.w3.org/2000/svg"
width="48"
height="48"
fill="currentColor"
viewBox="0 0 256 256"
class={Astro.props.class}
role="img"
aria-label="Icono de tema claro"
>
<path
d="M120,40V16a8,8,0,0,1,16,0V40a8,8,0,0,1-16,0Zm72,88a64,64,0,1,1-64-64A64.07,64.07,0,0,1,192,128Zm-16,0a48,48,0,1,0-48,48A48.05,48.05,0,0,0,176,128ZM58.34,69.66A8,8,0,0,0,69.66,58.34l-16-16A8,8,0,0,0,42.34,53.66Zm0,116.68-16,16a8,8,0,0,0,11.32,11.32l16-16a8,8,0,0,0-11.32-11.32ZM192,72a8,8,0,0,0,5.66-2.34l16-16a8,8,0,0,0-11.32-11.32l-16,16A8,8,0,0,0,192,72Zm5.66,114.34a8,8,0,0,0-11.32,11.32l16,16a8,8,0,0,0,11.32-11.32ZM48,128a8,8,0,0,0-8-8H16a8,8,0,0,0,0,16H40A8,8,0,0,0,48,128Zm80,80a8,8,0,0,0-8,8v24a8,8,0,0,0,16,0V216A8,8,0,0,0,128,208Zm112-88H216a8,8,0,0,0,0,16h24a8,8,0,0,0,0-16Z"
></path>
</svg>
Loading

0 comments on commit fac9694

Please sign in to comment.