Emacs SVG Toolbar

content_copy-black-24dp.svg

content_cut-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="M9.64 7.64c.23-.5.36-1.05.36-1.64 0-2.21-1.79-4-4-4S2 3.79 2 6s1.79 4 4 4c.59 0 1.14-.13 1.64-.36L10 12l-2.36 2.36C7.14 14.13 6.59 14 6 14c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4c0-.59-.13-1.14-.36-1.64L12 14l7 7h3v-1L9.64 7.64zM6 8c-1.1 0-2-.89-2-2s.9-2 2-2 2 .89 2 2-.9 2-2 2zm0 12c-1.1 0-2-.89-2-2s.9-2 2-2 2 .89 2 2-.9 2-2 2zm6-7.5c-.28 0-.5-.22-.5-.5s.22-.5.5-.5.5.22.5.5-.22.5-.5.5zM19 3l-6 6 2 2 7-7V3h-3z"/></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