Add icons

> Published on Sat, 9 Dec 2023, 21:02> Updated on Fri, 15 Dec 2023, 16:05

In order to add new icons you'll need to get a .svg with a 0 0 24 24 viewBox. Then you can simply add it to the simple-bar > lib > components > Icons.jsx:

export const Caprine = (props) => (
  <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>
);

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 :

import as * Icons from './components/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.