Open kvndrsslr opened 3 years ago
Preview? :)
Feel free to add my fork as a git-remote and checkout my main branch for preview!
Signal and Preview (standard PDF icon) in https://github.com/Jean-Tinland/simple-bar/pull/194
Oh, you meant the app Preview! Thought you wanted to preview the new icons.😅
how about these applications
I'll add them to the list. Pretty busy with work atm, so my progress is bound to be slow. Feel free to contribute, I will insert the workflow as described by @Jean-Tinland in the first post. I found the workflow is easy to follow and once I figured out how to use figma I got pretty fast at it.
Signal/Zotero/Preview in https://github.com/Jean-Tinland/simple-bar/pull/195
hey, great work on the recent updates, really looking forward to custom widgets :D
Can we get the vscode icon linked to vscode insiders as well?
I'd assume VSCodium would be a similar situation too, not sure if that's handled, just thought i'd mention it.
Just wondering if we could add a few more icons such as: Vivaldi Atom Folx Xcode
I added these 4 to the list!
I am wondering if there's any way to adjust the size of the icons in the bar?
Can we please get system preferences in here too please
I added a gear icon for System preferences
app in my latest commit!
Thank you! Can we please get the News icon as well please
would it be possible to assign icons to certain apps?. for example a calendar icon for a different, or non-standard calendar app. Or Apple preview which for me (on a Norwegian system) gets the default icon.
I'd love an Omnifocus icon!
I've made and added some of the mentioned icons on the current icon tracker and it works for me. Also, sublime text has already been implemented.
Awesome work, love this bar. An email icon for https://mimestream.com/ would be nice, thanks!
I am wondering if there's any way to adjust the size of the icons in the bar?
@m-k-S I managed to do it by making adjustments to the css for the space__icon
class in lib/styles/components/spaces/space.js
.
.space__icon {
flex: 0 0 16px;
width: 16px;
height: 11px;
margin-left: 6px;
fill: currentColor;
opacity: 0.5;
transform: matrix(1.5, 0, 0, 1.5, 0, 0);
}
After scaling the icons using a transformation matrix, I tweaked width
and flex
to correct the horizontal spacing.
Could you please add icons for:
I took a stab at creating them but don't know if they are up to your standards. Would you prefer that I open a pull request?
export const GoodNotes = (props) => (
<Icon {...props}>
<path d="M6.375 5.625h8.25a.375.375 0 000-.75h-8.25a.375.375 0 000 .75zm0 0M6.375 7.875h8.25a.375.375 0 000-.75h-8.25a.375.375 0 000 .75zm0 0M6.375 10.125h8.25a.375.375 0 000-.75h-8.25a.375.375 0 000 .75zm0 0M6.375 12.375h8.25a.375.375 0 000-.75h-8.25a.375.375 0 000 .75zm0 0M6.375 14.625h3a.375.375 0 000-.75h-3a.375.375 0 000 .75zm0 0"/>
<path d="M21.195 9.61a1.131 1.131 0 00-1.543.402l-.902 1.543V2.25a.375.375 0 00-.375-.375h-2.844S14.402.727 14.36.765A.353.353 0 0014.25.75H3.375A.375.375 0 003 1.125v1.172a1.5 1.5 0 000 2.906v.844a1.5 1.5 0 000 2.906v.844a1.5 1.5 0 000 2.906v.469a1.5 1.5 0 000 2.906v2.297c0 .207.168.375.375.375h.375v1.125c0 .207.168.375.375.375h9.531l-.258.438a.365.365 0 00-.046.128v.004l-.004.008-.297 1.992c-.024.153.047.301.18.38a.372.372 0 00.417-.028l1.598-1.238c.102-.082.152-.13.145-.196l.87-1.488h2.114a.375.375 0 00.375-.375v-3.871l2.844-4.856a1.123 1.123 0 00-.399-1.539zm-.664.609c.145-.04.301.015.395.136a.38.38 0 01.023.415l-.191.324-.645-.38.188-.323a.367.367 0 01.23-.172zm-5.648 10.906l-.649-.379 4.93-8.414.648.379zm-.258-19.094l1.344 1.344h-1.344zm4.918 9.653l.191-.32.645.378-.188.32zM18 2.625V12.75c0 .023.004.047.008.074l-.758 1.29V3.75a.379.379 0 00-.11-.266l-.859-.859zM3.75 1.5h10.125v2.25c0 .207.168.375.375.375h2.25v11.27L14.973 18H3.75v-1.922c.527-.137.941-.55 1.078-1.078a.375.375 0 00-.727-.188.736.736 0 01-.351.461v-2.57c.527-.137.941-.55 1.078-1.078a.375.375 0 00-.727-.188.736.736 0 01-.351.461V8.953c.527-.137.941-.55 1.078-1.078a.375.375 0 00-.727-.188.736.736 0 01-.351.461V5.203c.527-.137.941-.55 1.078-1.078a.375.375 0 00-.727-.188.736.736 0 01-.351.461zM2.625 3.75c0-.27.145-.516.375-.648v1.296a.748.748 0 01-.375-.648zm0 3.75c0-.27.145-.516.375-.648v1.296a.748.748 0 01-.375-.648zm0 3.75c0-.27.145-.516.375-.648v1.296a.748.748 0 01-.375-.648zm0 3.375c0-.27.145-.516.375-.648v1.296a.748.748 0 01-.375-.648zM4.5 19.5v-.75h10.035l-.441.75zm9.508 1.98l.34.2-.418.324zM18 19.5h-1.297L18 17.285zm0 0"/>
</Icon>
)
export const Quip = (props) => (
<Icon {...props}>
<path d="M21 21.75h-9A9.748 9.748 0 012.25 12 9.748 9.748 0 0112 2.25 9.748 9.748 0 0121.75 12v9a.75.75 0 01-.75.75zm-9-18A8.252 8.252 0 003.75 12 8.252 8.252 0 0012 20.25h8.25V12A8.252 8.252 0 0012 3.75zm0 0"/>
<path d="M15.375 9.375h-6.75a.75.75 0 010-1.5h6.75a.75.75 0 010 1.5zm0 0M15.375 16.125h-6.75a.75.75 0 010-1.5h6.75a.75.75 0 010 1.5zm0 0M17.625 12.75H6.375a.75.75 0 010-1.5h11.25a.75.75 0 010 1.5zm0 0"/>
</Icon>
)
export const Screens4 = (props) => (
<Icon {...props}>
<path
fillRule="evenodd"
d="M8.094 1.316a1.685 1.685 0 00-1.395 1.239l-.074.28-.348.032c-1.086.102-2.074.946-2.226 1.899l-.031.199-.262.031c-1.7.2-2.957 1.27-3.266 2.777-.258 1.27-.238 11.829.024 12.938.304 1.281 1.394 2.348 2.671 2.613 1.137.235 16.489.235 17.625 0 1.293-.27 2.434-1.406 2.696-2.691.242-1.184.242-11.676 0-12.86-.309-1.507-1.567-2.578-3.266-2.777l-.262-.031-.03-.2c-.153-.952-1.141-1.796-2.227-1.898l-.348-.031-.074-.281c-.192-.684-.711-1.137-1.438-1.243-.394-.054-7.375-.054-7.77.004M16 1.594c.54.203.91.703.957 1.281l.023.3.383.024c1.23.078 2.137 1.047 2.137 2.285v.223l.309.031c1.27.13 2.32 1.024 2.675 2.278.13.457.133 11.07.004 11.625-.074.324-.37 1.03-.433 1.03-.016 0-.004-.038.023-.089.067-.129.067-.133-.129-.125-.11 0-.207.04-.258.098-.046.05-.023-.012.055-.14.074-.13.188-.372.246-.54l.11-.305.011-5.386c.016-6.067.024-5.891-.312-6.567-.352-.715-1.04-1.215-1.863-1.36-.551-.1-15.329-.097-15.883 0-1.106.196-1.922 1.024-2.114 2.145-.058.328-.066 1.246-.054 5.782l.011 5.386.11.305c.058.168.172.41.25.54.137.226.137.23.02.105-.145-.149-.13-.145-.282-.075-.094.043-.11.07-.07.14.023.048.035.087.02.087-.063 0-.356-.695-.434-1.027-.13-.56-.13-11.165.004-11.63.355-1.253 1.406-2.148 2.675-2.277l.309-.031v-.223c0-1.238.906-2.207 2.137-2.285l.383-.023.023-.301a1.503 1.503 0 01.941-1.277c.383-.149 7.625-.149 8.016-.004m-7.734.14c-.567.118-.97.586-1.036 1.2l-.023.253h.75l.027-.195c.075-.57-.074-.55 4.016-.55s3.941-.02 4.016.55l.027.196h.75l-.023-.254c-.055-.504-.344-.922-.782-1.125-.23-.106-7.23-.172-7.722-.075m-1.844 1.79c-.934.148-1.64 1.019-1.64 2.015v.18h1.16l.019-.305c.031-.469.242-.695.719-.773.379-.063 10.261-.063 10.64 0 .477.078.688.304.72.773l.019.305h1.16v-.18c0-1.02-.707-1.867-1.688-2.023-.383-.059-10.738-.055-11.11.007m13.571 4.329c.215.109.313.195.422.37l.14.231.005 2.512c0 1.383-.004 2.39-.016 2.242l-.016-.27-.23.02c-.125.012-.235.004-.242-.012-.008-.02-.137-.023-.285-.015l-.27.015v.375c0 1.11-.637 2-1.629 2.274-.492.133-11.25.133-11.742 0-.973-.27-1.629-1.172-1.629-2.239 0-.418.023-.402-.574-.394-.2.004-.364-.012-.364-.031 0-.207-.093.039-.105.277-.008.176-.02-.805-.027-2.176l-.008-2.488.133-.25c.148-.29.422-.488.761-.555.114-.023 3.57-.039 7.805-.035l7.598.008.273.14M2.602 20.86c.101.102.171.188.16.188-.012 0-.106-.086-.207-.188-.102-.101-.172-.187-.16-.187.011 0 .105.086.207.187m19.007-.172c0 .008-.09.094-.199.2l-.2.183.185-.199c.175-.183.214-.223.214-.183" />
</Icon>
)
export const SketchUp = (props) => (
<Icon {...props}>
<path
fillRule="evenodd"
d="M21.29 19.465 6.144 23.762 3.14 14.418 1.098 2.176 15.488.238l7.414 5.696Zm-14.927-1.61 4.617-1.183-1.18-2.254-4.296.965Zm-1.398-6.554 4.512-.965 1.183 2.144 5.047-1.07-3.117-3.867-8.485 1.504Zm10.203-9.664L2.602 3.247 3.46 5.18l9.02-1.29 3.332 3.329 5.261-.86Zm0 0" />
</Icon>
)
Thank you for all of your work!
Drew a Remnote icon
export const Remnote = (props) => (
<Icon {...props}>
<path d="M8.5 15h7l2.95 4.213a.5.5 0 0 1-.41.787H5.96a.5.5 0 0 1-.41-.787L8.5 15Z" />
<path d="M.5 15a.5.5 0 0 1-.5-.5v-4a.5.5 0 0 1 .5-.5H12l-3.6 5H.5Z" />
<path d="M2.146 5.986a.525.525 0 0 1 0-.722l2.896-3.016a.476.476 0 0 1 .704.012L10 7l2 3H6L2.146 5.986Z" />
<path d="M23.5 15a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 0-.5-.5H12l3.6 5h7.9Z" />
<path d="M21.854 5.986a.525.525 0 0 0 0-.722l-2.896-3.016a.476.476 0 0 0-.704.012L14 7l-2 3h6l3.854-4.014Z" />
<path d="M10 .5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5V10h-4V.5Z" />
</Icon>
Not sure if anyone else uses the app for this, but I figured I'd post it here just in case.
Thank you both @mrala & @cjnewco for these icons, I added them in the codebase and linked them to these apps. Let me know if I got some app names wrong and some icons are not showing.
I updated the TODO list and I will add the latest 2 requested icons soon!
Pushed a few more icons your way:
Would you mind adding an icon for Pins?
export const Pins = (props) => (
<Icon {...props}>
<path d="M11 17h2v5l-2 2v-7zm3.571-12c0-2.903 2.36-3.089 2.429-5h-10c.068 1.911 2.429 2.097 2.429 5 0 3.771-3.429 3.291-3.429 10h12c0-6.709-3.429-6.229-3.429-10z"/>
</Icon>
);
Can I get an icon for the Arc Browser? https://arc.net Thank you very much @kvndrsslr
@litszwaiboris Heres the one that I made
export const Arc = (props) => (
<Icon {...props}>
<path fill-opacity=".7" fill-rule="evenodd" d="M23.466 6.208a2.537 2.537 0 0 1 1.326 3.333c-1.744 4.048-3.938 6.784-6.485 8.372-2.586 1.614-5.29 1.889-7.705 1.451-2.364-.428-4.444-1.53-6.001-2 .69-1.476-1.1-2.817-2.502-3.387-3.802a2.536 2.536 0 0 1 4.645-2.04s.026.053.101.16c.083.118.202.268.362.444a9.28 9.28 0 0 0 1.308 1.169c1.103.82 2.47 1.513 3.876 1.768 1.356.245 2.746.09 4.117-.76 4 1.41-.88 3.035-2.65 4.51-6.075a2.537 2.537 0 0 1 3.334-1.326Z" clip-rule="evenodd"/>
<path d="M10.167 1.79a3.13 3.13 0 0 1 5.676.038l7.88 17.241A3.139 3.139 0 1 1 18 21.65l-5.024-11.307-5.689 11.523a2.994 2.994 0 0 1-5.39-2.606l8.27-17.468Z"/>
</Icon>
)
Thank you very much @cjnewco
I added Mimestream & Anki icons.
@cjnewco & @mrala I added your icons (Arc & Pins) in master, thanks!
Is this where I can request? I'm missing:
Thanks ❤️
I added SuperProductivity & GnuCash icons. Let me know if they are correctly linked to the app. If not let me know the exact app/process name so I can correct it.
About the Apple Calendar app there is already an icon linked to the app (app name: "Calendar"). What is the app/process name of you calendar app?
Ah, my calendar app name is localized to "Kalender".
Its "Gnucash" and "Super Productivity" for the other two app names, changed those names (and Calendar->Kalender) in app-icons.js and they all show up nicely, thanks a lot 😃
Okay, thank you for the information. I corrected both app names in app-icons.js
and added the icon localization for Calendar
.
I don't plan to add more icon in languages other than english as it is supposed to be the only one supported but I sometimes make exceptions. On the long run I don't want to increase to much the code base size.
Could you please add icons for OrbStack and Chatterino? Here are my attempts:
export const OrbStack = (props) => (
<Icon {...props}>
<path d="M6.348 0h8.511c1.45.04 2.907-.05 4.356.094 1.105.11 2.191.535 3.02 1.289a4.941 4.941 0 0 1 1.453 2.273c.269.856.292 1.758.312 2.649v11.46c-.023.801-.043 1.61-.258 2.387-.25.993-.82 1.891-1.594 2.559a5.151 5.151 0 0 1-2.261 1.102c-.696.156-1.418.164-2.13.187H6.255c-.89-.027-1.8-.047-2.652-.332a5 5 0 0 1-3-2.61c-.465-.949-.563-2.023-.579-3.066-.03-1.168.008-2.336-.023-3.504V7.16c.035-1.137-.023-2.3.297-3.41A5.017 5.017 0 0 1 3.016.574C4.05.07 5.219.047 6.348 0m4.539 3.324a8.536 8.536 0 0 0-5.102 2.461C4.34 7.2 3.434 9.141 3.235 11.152c-.016 1.036-.083 2.09.21 3.094.38 1.465 1.13 2.852 2.223 3.906 1.324 1.418 3.168 2.325 5.09 2.578 1.527.145 3.129.032 4.531-.64 1.168-.77 2.137-1.809 2.887-2.98.258-.485.605-.919.742-1.458.008.508-.438.844-.54 1.317a12.396 12.396 0 0 0 1.61-4.41c-.008-.473.125-.934.106-1.407 0-.437.156-.867.07-1.308a8.611 8.611 0 0 0-.777-2.176c-1.594-3.004-5.145-4.766-8.5-4.344Zm0 0"/>
<path fill-opacity=".7" fill-rule="evenodd" d="M6.977 5.352c.343-.223.707-.543 1.148-.422-.703.578-1.21 1.355-1.836 2.011-.71.762-1.351 1.59-1.965 2.43-.238.36-.27.844-.625 1.121-.11-.765.332-1.433.543-2.133.551-.996 1.235-1.933 2.102-2.671.176-.118.36-.235.515-.38.016-.113.098-.253.235-.23-.032.094-.078.18-.117.274ZM13.633 6.063c.738-.055 1.539.019 2.172.445.238.133.515.219.703.43.332.351.71.667.937 1.101.242.445.528.871.703 1.352.207.504.293 1.046.364 1.582-.016.566.074 1.152-.145 1.691-.172.625-.656 1.176-1.285 1.352-.344-.133-.703-.34-.855-.696-.145-.308-.356-.586-.508-.89a17.213 17.213 0 0 0-1.192-2.192 32.978 32.978 0 0 0-1.054-1.75c-.348-.597-.641-1.261-.582-1.968.203-.207.43-.442.742-.457Zm0 0"/>
</Icon>
);
export const Chatterino = (props) => (
<Icon {...props}>
<path d="M2.879 16.969s-.621-1.344-.957-2.856a9.693 9.693 0 0 1-.168-2.832c.285-4.008 2.973-8.57 7.629-10.008 3.48-1.082 7.082-.867 9.695 1.055 3.336 2.473 3.195 3 3.195 3l-4.73 4.656s-1.055-2.113-3.285-2.879c-1.563-.554-2.809-.335-3.89-.144C9 7.199 6.624 8.137 4.944 10.223c-.578.722-1.082 1.464-1.488 2.547-.723 1.992-.578 4.199-.578 4.199"/>
<path d="M13.992 23.762h-.238c-3.531-.121-5.617-1.008-6.555-1.54-.36.364-.91.817-1.558 1.06-1.13.405-2.45.238-2.52.238l-1.754-.239 1.418-1.058c.024-.024.79-.621.79-1.606.027-1.273-.31-1.898-.575-2.426-1.32-2.566-1.848-4.703-1.68-6.96C1.61 7.343 4.223 2.448 9.238.91c3.84-1.177 7.489-.766 10.059 1.151 3.625 2.692 3.48 3.313 3.383 3.672l-.047.196-5.473 5.328-.433-.914c0-.024-.817-1.656-2.665-2.23-1.124-.36-2.496-.024-3.261.48-2.067 1.39-2.664 3.695-1.465 5.496.937 1.367 2.328 2.039 4.031 1.918 1.848-.121 3.387-2.352 3.387-2.375l.476-.723 5.692 5.547-.363.504c-.145.215-3.649 4.8-8.567 4.8m-7.031-3.48.574.453c.024 0 1.899 1.442 6.266 1.586 3.406.121 6.191-2.593 7.199-3.718l-3.55-3.48c-.747.862-2.184 2.23-3.962 2.35-2.23.145-4.105-.745-5.328-2.542-1.656-2.45-.863-5.664 1.848-7.489 1.055-.722 2.832-1.203 4.488-.671 1.512.476 2.496 1.46 3.024 2.16l3.55-3.457c-.308-.336-1.008-1.032-2.636-2.235-2.188-1.629-5.403-1.965-8.786-.933C5.281 3.625 3 7.922 2.762 11.352c-.145 1.968.308 3.816 1.535 6.168.383.746.766 1.609.742 3.12a3.16 3.16 0 0 1-.336 1.415c.145-.024.29-.07.434-.117.597-.22 1.199-.868 1.367-1.083Zm0 0"/>
</Icon>
);
I opened a PR to add those icons and sorted the list of apps and icons to make it easier to work with: https://github.com/Jean-Tinland/simple-bar/pull/393
That's nice, thanks!
May I request RocketChat? 😊
May I request RocketChat? 😊
Here's an attempt for RocketChat:
<Icon {...props}>
<path fill="#c1272d" d="M24 12a8 8 0 0 0-1-4 9.6 9.6 0 0 0-2.7-3c-2.2-1.6-5-2.5-8-2.5-1 0-2 0-3 .3a9.9 9.9 0 0 0-2-1.7C3.2-1.2 0 1 0 1s3 2.8 2.6 5.4A8.3 8.3 0 0 0 .5 12c0 2 .7 4 2 5.5C3 20 0 23 0 23s3.3 2.2 7.2 0c.8-.5 1.5-1.1 2-1.8l3 .3c3 0 5.9-.9 8-2.5 1.2-.8 2-1.8 2.7-3a8 8 0 0 0 1.1-4Zm0 0"/><path fill="#fff" d="M12.2 4.5c5.6 0 10.1 3.4 10.1 7.5 0 4.2-4.5 7.6-10 7.6a13 13 0 0 1-3.6-.5c-1.1 1.6-3.6 3.7-6 3a7 7 0 0 0 1.7-5.3A6.5 6.5 0 0 1 2.1 12c0-4.1 4.5-7.5 10.1-7.5"/><path fill="#c1272d" d="M12.2 13.8c.8 0 1.4-.7 1.4-1.5 0-1-.6-1.6-1.4-1.6-.7 0-1.3.7-1.3 1.6 0 .8.6 1.5 1.3 1.5Zm4.7 0c.7 0 1.3-.7 1.3-1.5 0-1-.6-1.6-1.3-1.6-.8 0-1.4.7-1.4 1.6 0 .8.6 1.5 1.4 1.5Zm-9.3 0c.7 0 1.3-.7 1.3-1.5 0-1-.6-1.6-1.3-1.6-.8 0-1.4.7-1.4 1.6 0 .8.6 1.5 1.4 1.5Zm0 0"/><path fill="#ccc" d="M12.2 18.6c-1.2 0-2.4-.2-3.5-.4-1 1.2-3 2.8-5.1 2.7l-.9 1.2c2.4.7 4.9-1.4 6-3 1 .3 2.3.5 3.5.5 5.6 0 10-3.4 10.1-7.5 0 3.6-4.5 6.5-10 6.5Zm0 0"/>
</Icon>
Just a heads up, I opened a PR to add an icon for CARROT: https://github.com/Jean-Tinland/simple-bar/pull/404.
@exic I added the RocketChat icon, please let me know if this is working well!
I'd like to request a handful of app icons:
Sure I'll add these icons soon!
@TehNeon
I added the following JetBrains app icons:
And these other app icons:
Please let me know if the app/icon association is working, I may have not set the correct name for every app.
@TehNeon
I added the following JetBrains app icons:
- Aqua
- CLion
- DataGrip
- Fleet
- GoLand
- PyCharm
- PHPStorm
- Rider
- RubyMine
- RustRover
And these other app icons:
- ChatGPT
- MongoDB Compass
- Redis Insight
- RoyalTSX
Please let me know if the app/icon association is working, I may have not set the correct name for every app.
I don't have all the Jetbrains apps installed, but I can verify that these ones work:
As for the other applications, the only one that doesn't work is RoyalTSX, likely due to the application name being "Royal TSX"
Opened a PR for a Copilot Money icon in #420
@cjnewco this is nice, thanks :)
Microsoft Outlook would also be helpful
@tim-hilde done :)
Current Icon Tracker
Icon Contribution Guideline
(Originally posted by @Jean-Tinland in https://github.com/Jean-Tinland/simple-bar/issues/164#issuecomment-896912216)
For each icon I'm following these steps:
24x24
viewboxicons.jsx
file in order to make the association inapp-icons.js