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

<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="M11 6c1.38 0 2.63.56 3.54 1.46L12 10h6V4l-2.05 2.05C14.68 4.78 12.93 4 11 4c-3.53 0-6.43 2.61-6.92 6H6.1c.46-2.28 2.48-4 4.9-4zm5.64 9.14c.66-.9 1.12-1.97 1.28-3.14H15.9c-.46 2.28-2.48 4-4.9 4-1.38 0-2.63-.56-3.54-1.46L10 12H4v6l2.05-2.05C7.32 17.22 9.07 18 11 18c1.55 0 2.98-.51 4.14-1.36L20 21.49 21.49 20l-4.85-4.86z"/></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

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/