Skip to content

Instantly share code, notes, and snippets.

View dropddesigns's full-sized avatar

Drop D Designs dropddesigns

  • Drop-D Designs
  • Perth, Australia
View GitHub Profile
@davidhund
davidhund / accessible-svg-sprite-icons.md
Last active August 30, 2024 17:03
Figuring out the most robust, accessible markup for SVG Sprite Icons

(as a reply to: https://css-tricks.com/svg-use-with-external-reference-take-2/)

While I love SVG (sprites) there are a lot of issues to take into account.

Advocating The Most Accessible Markup

UPDATE: you should take a look at https://dl.dropboxusercontent.com/u/145744/accessible-svg-icon/test.html which seems a simpler and more robust approach

Another thing: since people copy-paste our code examples it would be great if we could advocate the most robust and accessible markup IMO. I am no a11y expert, but in my understanding we could/should take some extra steps to make out SVG sprite icons more accessible.

@wesleytodd
wesleytodd / icons.scss
Last active September 4, 2020 15:45
Using a list to dynamically create classes for an icon font
// All of our icons
$icons: (
(exclaim, "\21"),
(x, "\78"),
(play, "\25b7"),
(user, "\2603"),
(search, "\2604"),
(menu, "\2637"),
(loading, "\2668"),
(flag, "\2690"),