Giter Club home page Giter Club logo

sketchybar-app-font's Introduction

sketchybar-app-font

A ligature-based symbol font and a mapping function for sketchybar, inspired by simple-bar's usage of community-contributed minimalistic app icons. Please feel free to contribute icons or add applications to the mappings through PRs.

If you can't contribute yourself, you can ask for icons in issues and maybe someone will work on those issues, but please note that I'm not committed to work on those issues myself.

However, I will try to merge all PRs asap.

CLI Usage

# install dependencies
pnpm install
# - build the files
# - install the font to: $HOME/Library/Fonts/sketchybar-app-font.ttf
# - install the icon map script to: $HOME/.config/sketchybar/icon_map.sh
pnpm run build:install 
# - build the files
# - install the font to: $HOME/Library/Fonts/sketchybar-app-font.ttf
# - replace the icon map function in the given script
pnpm run build:install -- $HOME/.config/sketchybar/scripts/my-script.sh
# same as build:install but watches changes to files in ./svgs and ./mappings and refires
pnpm run build:dev
pnpm run build:dev -- $HOME/.config/sketchybar/scripts/my-script.sh

Configure Sketchybar

Using icon_map.sh

source ./path/to/icon_map.sh

__icon_map "${app_name}"
symbol_ligature="${icon_result}"

Set up auto-replacing the icon map function in your own script

  1. Mark where the function should be inserted to:
### START-OF-ICON-MAP
# Here be the function
### END-OF-ICON-MAP
  1. Run the install script with the argument pointing at the path of the file that has the markers:
pnpm run build:install -- $HOME/.config/sketchybar/scripts/my-script.sh

Contribution Guideline

(Core method copied from Jean-Tinland/simple-bar#164 (comment))

For each icon I'm following these steps:

  1. I'm getting the original icon or, if not in a vector format I'm redrawing it in Figma. No need to be extremely precise as it is displayed in a really small size)
  2. I'm setting the new icon in a 24x24 viewbox
  3. Then I'm optimising it using SVGOMG
  4. Add the icon to /svgs/ folder, using a snake_case name surrounded by colons and a '.svg' extension
  5. Add a file to /mappings/ using the same name but without the '.svg' extension. This file indicates which app names should match the icon. The format is "App Name 1" | "App Name 2"

sketchybar-app-font's People

Contributors

kvndrsslr avatar janbiasi avatar mattresspadley avatar jo-panic avatar demianeen avatar hongyuanjia avatar rferrpla avatar samchugit avatar thezacharytaylor avatar erics118 avatar alberteddu avatar xiione avatar wierdbytes avatar corruptmane avatar chupsondev avatar wramalho avatar arelav avatar cu3po42 avatar shajra avatar bustinbung avatar bin101 avatar jakucermak avatar astralhpi avatar david-hagerty avatar bassamsdata avatar khaneliman avatar augists avatar aimuzov avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.