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/:

javascript
import 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:

javascript
export 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 :

javascript
import * 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.