Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Emacs SVG Toolbar
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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))
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@rougier

This comment has been minimized.

Copy link
Owner Author

@rougier rougier commented Nov 30, 2020

Screenshot 2020-11-30 at 12 46 18

@mcraveiro

This comment has been minimized.

Copy link

@mcraveiro mcraveiro commented Feb 23, 2021

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

This comment has been minimized.

Copy link

@mcraveiro mcraveiro commented Feb 23, 2021

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