Add icons
> Published on Sat, 9 Dec 2023, 21:02> Updated on Thu, 8 Aug 2024, 15:26
In order to add new icons you'll need to get a .svg
with a 0 0 24 24
viewBox. Then you can simply create a file in simple-bar/lib/components/icons/library/
:
javascriptimport Icon from "../icon.jsx"; export default function Caprine(props) { return ( <Icon {...props}> <path d="M12 0C5.37 0 0 4.97 0 11.11c0 3.5 1.74 6.62 4.47 8.65V24l4.09-2.24c1.09.3 2.24.46 3.44.46 6.63 0 12-4.97 12-11.1C24 4.97 18.63 0 12 0zm1.2 14.96l-3.06-3.26-5.97 3.26L10.73 8l3.13 3.26L19.76 8l-6.57 6.96z" /> </Icon> ); }
Then, import and export it in simple-bar/lib/components/icons/icons.jsx
:
javascriptexport const Caprine = React.lazy(() => import("./library/caprine.jsx"));
To link it to a process you'll need to get the Yabai process name and make the association in simple-bar/lib/app-icons.js
:
javascriptimport * as Icons from "./components/icons/icons.jsx"; export const appIcons = { 'Android Messages': Icons.AndroidMessages, Caprine: Icons.Caprine, Code: Icons.Code, Default: Icons.Default, Figma: Icons.Figma, 'Google Chrome': Icons.GoogleChrome, Music: Icons.Music, 'Sequel Pro': Icons.SequelPro, Skype: Icons.Skype, Slack: Icons.Slack, Zeplin: Icons.Zeplin }
If there is no icon defined for a running process, there is a default one which will be used as fallback.
Same as for themes, feel free to post a message in this issue if you have an icon request.
Large selection of icons added thanks to @jamieweavis, @MikoMagni, @anujc4, @SijanC147, @donaldguy, @d-miketa, @wr1159
Something is wrong in this documentation? Please open an issue on GitHub in simple-bar repo.