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

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="24px" height="24px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></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

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/