Emacs SVG Toolbar

content_copy-black-24dp.svg

content_cut-black-24dp.svg

content_paste-black-24dp.svg

create-black-24dp.svg

exit_to_app-black-24dp.svg

find_replace-black-24dp.svg

insert_drive_file-black-24dp.svg

mail_outline-black-24dp.svg

redo-black-24dp.svg

save-black-24dp.svg

search-black-24dp.svg

Toolbar.el

;; 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))

undo-black-24dp.svg

visibility-24px.svg

<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/></svg>

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.

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

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