Skip to content

Instantly share code, notes, and snippets.

@rougier
Created November 30, 2020 12:05
Show Gist options
  • Star 12 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save rougier/80d4926d522594235107743db880ecff to your computer and use it in GitHub Desktop.
Save rougier/80d4926d522594235107743db880ecff to your computer and use it in GitHub Desktop.
Emacs SVG Toolbar
Display the source blob
Display the rendered blob
Raw
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Display the source blob
Display the rendered blob
Raw
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Display the source blob
Display the rendered blob
Raw
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Display the source blob
Display the rendered blob
Raw
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Display the source blob
Display the rendered blob
Raw
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Display the source blob
Display the rendered blob
Raw
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Display the source blob
Display the rendered blob
Raw
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Display the source blob
Display the rendered blob
Raw
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Display the source blob
Display the rendered blob
Raw
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Display the source blob
Display the rendered blob
Raw
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Display the source blob
Display the rendered blob
Raw
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
;; An experiment for an SVG toolbar using icons from material.io
;;
;; Example usage: (toolbar 48 "black" "white" t t)
;; Material icons freely available (Apache 2 license) from
;; - https://material.io/resources/icons/?style=outline
;; - https://github.com/google/material-design-icons
(require 'xml) (require 'svg)
(defun toobar-item (label icon fg-color bg-color size with-icon with-label)
(let* ((height (cond ((and with-icon with-label) 42)
(with-icon 32)
(with-label 18)))
(label-y (if with-icon 33 9))
(svg (svg-create size (ceiling (* size (/ height 48.0)))
:viewBox (format "-12 -4 48 %d" height)
:stroke-width 0 :fill fg-color))
(root (xml-parse-file icon)))
(svg-rectangle svg -12.0 -4.0 48 height :fill fg-color :rx 3.0)
(svg-rectangle svg -11.5 -3.5 47 (- height 1) :fill bg-color :rx 2.5)
(if with-icon
(dolist (item (xml-get-children (car root) 'path))
(let* ((attrs (xml-node-attributes item))
(path (cdr (assoc 'd attrs)))
(fill (or (cdr (assoc 'fill attrs)) fg-color)))
(svg-node svg 'path :d path :fill fill))))
(if with-label
(svg-text svg label
:text-anchor "middle"
:font-family "Roboto Condensed"
:font-weight 300
:font-size 10
:fill fg-color
:x 12
:y label-y))
(insert-image (svg-image svg))))
(defun toolbar (size fg-color bg-color with-icon with-label)
(toobar-item "New" "create-black-24dp.svg"
fg-color bg-color size with-icon with-label)
(insert " ")
(toobar-item "Open" "insert_drive_file-black-24dp.svg"
fg-color bg-color size with-icon with-label)
(insert " ")
(toobar-item "Save" "save-black-24dp.svg"
fg-color bg-color size with-icon with-label)
(insert " - ")
(toobar-item "Cut" "content_cut-black-24dp.svg"
fg-color bg-color size with-icon with-label)
(insert " ")
(toobar-item "Copy" "content_copy-black-24dp.svg"
fg-color bg-color size with-icon with-label)
(insert " ")
(toobar-item "Paste" "content_paste-black-24dp.svg"
fg-color bg-color size with-icon with-label)
(insert " - ")
(toobar-item "Undo" "undo-black-24dp.svg"
fg-color bg-color size with-icon with-label)
(insert " ")
(toobar-item "Redo" "redo-black-24dp.svg"
fg-color bg-color size with-icon with-label)
(insert " - ")
(toobar-item "Search" "search-black-24dp.svg"
fg-color bg-color size with-icon with-label)
(insert " ")
(toobar-item "Replace" "find_replace-black-24dp.svg"
fg-color bg-color size with-icon with-label)
(insert " - ")
(toobar-item "Quit" "exit_to_app-black-24dp.svg"
fg-color bg-color size with-icon with-label))
Display the source blob
Display the rendered blob
Raw
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Display the source blob
Display the rendered blob
Raw
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@rougier
Copy link
Author

rougier commented Nov 30, 2020

Screenshot 2020-11-30 at 12 46 18

@mcraveiro
Copy link

This is amazingly cool. Would it be possible to replace the existing tool bar icons using these ones, or is this a separate tool-bar altogether?

Many thanks for your time.

@mcraveiro
Copy link

Ah, my bad, I see the original reddit discussion [1] already shows an example of this. Looks pretty cool too!

Image

[1] https://www.reddit.com/r/emacs/comments/k3vuc1/experimental_svg_toolbar/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment