Skip to content

Commit

Permalink
v3.0.0: Updated for iOS 18.1
Browse files Browse the repository at this point in the history
- iOS 18 adds 50% more shortcut glyphs, reverts some to their old shapes, and changes outlined ones to filled ones.
- There were no updates for iOS 17 since there were no new glyphs and the changes were minor, but we now have separate glyph sets for iOS 16 and 17.
- The glyph resolution is the same, but the color palette has increased from 8 to 15 colors to reduce slight staircase effects.
  • Loading branch information
atnbueno authored Oct 5, 2024
1 parent e091a29 commit 3e5cba2
Show file tree
Hide file tree
Showing 11 changed files with 490 additions and 249 deletions.
2 changes: 1 addition & 1 deletion LICENSE
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ and I'm only using them to represent what can be seen in public iCloud links.

MIT License

Copyright (c) 2020-2022 Antonio Bueno
Copyright (c) 2020-2024 Antonio Bueno

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
Expand Down
8 changes: 4 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,19 @@

A CSS sprite to represent iOS shortcut icons.

Grab the [stylesheet](https://github.com/atnbueno/shortcut-icons/blob/main/shortcut-icons.css) and the [default (iOS 16) glyph set](https://github.com/atnbueno/shortcut-icons/blob/main/ios16-glyphs.png), and add a shortcut icon to your HTML with just an empty `div` element:
Grab the [stylesheet](https://github.com/atnbueno/shortcut-icons/blob/main/shortcut-icons.css) and the [default (iOS 18) glyph set](https://github.com/atnbueno/shortcut-icons/blob/main/ios18-glyphs.png), and add a shortcut icon to your HTML with just an empty `div` element:

```html
<div class="shortcut-icon c4251333119 g59793 s86"></div>
```

In this example `shortcut-icon` is the base CSS class. The secondary `c4251333119` class is the orange **color** from iOS 16, the `g59793` class is the "paintbrush" **glyph** and the `s86` class is the desired **icon size**. See the [demo.html](https://github.com/atnbueno/shortcut-icons/blob/main/demo.html) file for more examples.
In this example `shortcut-icon` is the base CSS class. The secondary `c4251333119` class is the orange **color** from iOS 18, the `g59793` class is the "paintbrush" **glyph** and the `s86` class is the desired **icon size**. See the [demo.html](https://github.com/atnbueno/shortcut-icons/blob/main/demo.html) file for more examples.

The color and glyph **numeric values** can be found both in the shortcut metadata (see below) and in its _plist_ (the shortcut "source code").

The HTML element doesn't have to be a `<div>`, although using other elements may require additional CSS to reset their appearance.

If you want to use the colors and glyphs from iOS 12-15, grab the glyph sets you want to use and add an additional `ios12`, `ios13`, `ios14`, or `ios15` class to each HTML element.
If you want to use the colors and glyphs from iOS 12-17, grab the glyph sets you want to use and add an additional `ios12`, `ios13`, `ios14`, `ios15`, `ios16`, or `ios17` class to each HTML element.

And if you need a size not in the CSS, it's easy to define your own. For example, to get 58×58 icons:

Expand Down Expand Up @@ -42,6 +42,6 @@ As the [LICENSE](https://github.com/atnbueno/shortcut-icons/blob/main/LICENSE) e

## Credits

Thanks to [@ActuallyZach](https://github.com/ActuallyZach) for providing the hi-res versions of the glyphs since iOS 12. Without them I don't think I'd have the patience to do this.
Thanks to [@ActuallyTaylor](https://github.com/ActuallyTaylor/) for her help in getting the hi-res versions of the glyphs since iOS 12. Without them I don't think I'd have the patience to do this.

Thanks also to the members of [r/Shortcuts'](https://discord.gg/HrzAhUu) and [RoutineHub's](https://discord.gg/2prYfrSUmc) Discords for their feedback.
153 changes: 141 additions & 12 deletions demo.html

Large diffs are not rendered by default.

Binary file modified ios12-glyphs.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ios13-glyphs.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ios14-glyphs.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ios15-glyphs.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ios16-glyphs.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ios17-glyphs.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ios18-glyphs.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
576 changes: 344 additions & 232 deletions shortcut-icons.css

Large diffs are not rendered by default.

0 comments on commit 3e5cba2

Please sign in to comment.