From 38b9b7aa3bdaa987d8737635b0f0f2892963fdfb Mon Sep 17 00:00:00 2001 From: ed Date: Fri, 19 Sep 2025 11:56:36 +0200 Subject: [PATCH] icon font update --- assets/fonts/brz9-icon-v1.2/Read Me.txt | 0 .../fonts/brz9-icon-v1.2/demo-files/demo.css | 0 .../fonts/brz9-icon-v1.2/demo-files/demo.js | 0 assets/fonts/brz9-icon-v1.2/demo.html | 0 .../fonts/brz9-icon-v1.2/fonts/brz9-icon.svg | 0 .../fonts/brz9-icon-v1.2/fonts/brz9-icon.ttf | Bin .../fonts/brz9-icon-v1.2/fonts/brz9-icon.woff | Bin assets/fonts/brz9-icon-v1.2/icon-style.css | 0 assets/fonts/brz9-icon-v1.2/selection.json | 0 proj/chordboard/tdmkr.sh | 0 proj/icons/icons.js | 236 ++++---- proj/icons/index.html | 560 +++++++++++------- 12 files changed, 462 insertions(+), 334 deletions(-) mode change 100755 => 100644 assets/fonts/brz9-icon-v1.2/Read Me.txt mode change 100755 => 100644 assets/fonts/brz9-icon-v1.2/demo-files/demo.css mode change 100755 => 100644 assets/fonts/brz9-icon-v1.2/demo-files/demo.js mode change 100755 => 100644 assets/fonts/brz9-icon-v1.2/demo.html mode change 100755 => 100644 assets/fonts/brz9-icon-v1.2/fonts/brz9-icon.svg mode change 100755 => 100644 assets/fonts/brz9-icon-v1.2/fonts/brz9-icon.ttf mode change 100755 => 100644 assets/fonts/brz9-icon-v1.2/fonts/brz9-icon.woff mode change 100755 => 100644 assets/fonts/brz9-icon-v1.2/icon-style.css mode change 100755 => 100644 assets/fonts/brz9-icon-v1.2/selection.json mode change 100755 => 100644 proj/chordboard/tdmkr.sh diff --git a/assets/fonts/brz9-icon-v1.2/Read Me.txt b/assets/fonts/brz9-icon-v1.2/Read Me.txt old mode 100755 new mode 100644 diff --git a/assets/fonts/brz9-icon-v1.2/demo-files/demo.css b/assets/fonts/brz9-icon-v1.2/demo-files/demo.css old mode 100755 new mode 100644 diff --git a/assets/fonts/brz9-icon-v1.2/demo-files/demo.js b/assets/fonts/brz9-icon-v1.2/demo-files/demo.js old mode 100755 new mode 100644 diff --git a/assets/fonts/brz9-icon-v1.2/demo.html b/assets/fonts/brz9-icon-v1.2/demo.html old mode 100755 new mode 100644 diff --git a/assets/fonts/brz9-icon-v1.2/fonts/brz9-icon.svg b/assets/fonts/brz9-icon-v1.2/fonts/brz9-icon.svg old mode 100755 new mode 100644 diff --git a/assets/fonts/brz9-icon-v1.2/fonts/brz9-icon.ttf b/assets/fonts/brz9-icon-v1.2/fonts/brz9-icon.ttf old mode 100755 new mode 100644 diff --git a/assets/fonts/brz9-icon-v1.2/fonts/brz9-icon.woff b/assets/fonts/brz9-icon-v1.2/fonts/brz9-icon.woff old mode 100755 new mode 100644 diff --git a/assets/fonts/brz9-icon-v1.2/icon-style.css b/assets/fonts/brz9-icon-v1.2/icon-style.css old mode 100755 new mode 100644 diff --git a/assets/fonts/brz9-icon-v1.2/selection.json b/assets/fonts/brz9-icon-v1.2/selection.json old mode 100755 new mode 100644 diff --git a/proj/chordboard/tdmkr.sh b/proj/chordboard/tdmkr.sh old mode 100755 new mode 100644 diff --git a/proj/icons/icons.js b/proj/icons/icons.js index a1d79ae..a6343a6 100644 --- a/proj/icons/icons.js +++ b/proj/icons/icons.js @@ -1,27 +1,27 @@ -Vue.component('icon', { +Vue.component("icon", { template: ` -
- + - Copied! -

{{ this.name }}

`, - props: ['name'], + props: ["name"], data() { return { - utf8: '', - isCopied: false - } + utf8: "", + isCopied: false, + }; }, computed: { class: function () { @@ -29,75 +29,77 @@ Vue.component('icon', { }, span: function () { return ''; - } - }, - methods: { - copyToClipboard(text) { - const textarea = document.createElement('textarea') - textarea.value = text - document.body.appendChild(textarea) - textarea.select() - document.execCommand('copy') - document.body.removeChild(textarea) - this.copyDone(); }, - copyDone() { - this.isCopied = true; - this.$refs.element.addEventListener('animationend', () => { - this.isCopied = false; - }); - } - }, - mounted() { - query = '.' + this.class - let span = document.querySelector(query) - let style = window.getComputedStyle(span, ':before') - let content = style.getPropertyValue('content') - //console.log(content) - this.utf8 = content.replace('"', '').replace('"', '') - } -}) - -Vue.component('copyfontimportlink', { - template: ` -
- - Copied! -
- `, - data() { - return { - importLink: '', - isCopied: false - } - }, - computed: { - displayText: function () { - html_text = "<link rel="stylesheet" href="https://file.brz9.dev/cdn/fonts/brz9-v2.5/style.css">"; - return html_text; - } }, methods: { copyToClipboard(text) { - const textarea = document.createElement('textarea'); + const textarea = document.createElement("textarea"); textarea.value = text; document.body.appendChild(textarea); textarea.select(); - document.execCommand('copy'); + document.execCommand("copy"); document.body.removeChild(textarea); this.copyDone(); }, copyDone() { this.isCopied = true; - this.$refs.element.addEventListener('animationend', () => { + this.$refs.element.addEventListener("animationend", () => { this.isCopied = false; }); - } - } -}) + }, + }, + mounted() { + query = "." + this.class; + let span = document.querySelector(query); + let style = window.getComputedStyle(span, ":before"); + let content = style.getPropertyValue("content"); + //console.log(content) + this.utf8 = content.replace('"', "").replace('"', ""); + }, +}); + +Vue.component("copyfontimportlink", { + template: ` +
+ + Copied! +
+ `, + data() { + return { + importLink: + '', + isCopied: false, + }; + }, + computed: { + displayText: function () { + html_text = + "<link rel="stylesheet" href="https://file.brz9.dev/cdn/fonts/brz9-v2.5/style.css">"; + return html_text; + }, + }, + methods: { + copyToClipboard(text) { + const textarea = document.createElement("textarea"); + textarea.value = text; + document.body.appendChild(textarea); + textarea.select(); + document.execCommand("copy"); + document.body.removeChild(textarea); + this.copyDone(); + }, + copyDone() { + this.isCopied = true; + this.$refs.element.addEventListener("animationend", () => { + this.isCopied = false; + }); + }, + }, +}); let vm = new Vue({ data() { @@ -115,15 +117,16 @@ let vm = new Vue({ "linuxmint", "freebsd", "apple", - "windows" + "windows", ], streaming: [ "bandcamp", + "qobuz", "spotify", "applemusic", "deezer", "soundcloud", - "tidal" + "tidal", ], payment: [ "cart", @@ -148,7 +151,7 @@ let vm = new Vue({ "patreon", "ulule", "tipeee", - "flattr" + "flattr", ], navigation: [ "arrow-down", @@ -198,14 +201,14 @@ let vm = new Vue({ "checkmark-outline", "link", "embed", - "embed-slash" + "embed-slash", ], form: [ "radio-checked", "radio-checked-alt", "radio-unchecked", "checkbox-checked", - "checkbox-unchecked" + "checkbox-unchecked", ], network: [ "tree", @@ -220,7 +223,7 @@ let vm = new Vue({ "earth", "power", "power-cord", - "wifi" + "wifi", ], alert: [ "warning", @@ -247,14 +250,9 @@ let vm = new Vue({ "bookmarks", "attachment", "address-book", - "accessibility" - ], - time: [ - "calendar", - "clock", - "clock2", - "alarm" + "accessibility", ], + time: ["calendar", "clock", "clock2", "alarm"], login: [ "user", "users", @@ -262,7 +260,7 @@ let vm = new Vue({ "exit", "equalizer", "equalizer2", - "cog" + "cog", ], afknav: [ "compass", @@ -274,7 +272,7 @@ let vm = new Vue({ "home", "office", "lab", - "binoculars" + "binoculars", ], fediverse: [ "mastodon", @@ -282,7 +280,7 @@ let vm = new Vue({ "peertube", "pixelfed", "rss", - "rss-square" + "rss-square", ], socials: [ "instagram", @@ -317,22 +315,16 @@ let vm = new Vue({ "notion", "pocket", "feedly", - "steam" - ], - privacy: [ - "gpg", - "tor", - "signal", - "ublockorigin", - "riot" + "steam", ], + privacy: ["gpg", "tor", "signal", "ublockorigin", "riot"], spyware: [ "telegram", "discord", "whatsapp", "skype", "slack", - "messenger" + "messenger", ], edit: [ "bold", @@ -374,22 +366,16 @@ let vm = new Vue({ "sort-numberic-desc", "sort-numeric-asc", "table", - "table2" + "table2", ], ratings: [ "star-empty", "star-full", "star-half", "heart", - "heart-broken" - ], - keyboard: [ - "tab", - "shift", - "ctrl", - "opt", - "command" + "heart-broken", ], + keyboard: ["tab", "shift", "ctrl", "opt", "command"], media: [ "play", "pause", @@ -421,7 +407,7 @@ let vm = new Vue({ "play-yt", "eject", "airplayaudio", - "airplayvideo" + "airplayvideo", ], files: [ "folder", @@ -442,13 +428,20 @@ let vm = new Vue({ "files-empty", "box-add", "box-remove", - "film" + "film", ], politics: [ "lfi", "pcf", "ps", - "faumar" + "eelv", + "lr", + "rn", + "cgt", + "faumar", + "ancom_flag", + "ancap_flag", + "anarchy", ], devices: [ "display", @@ -465,7 +458,7 @@ let vm = new Vue({ "phone-hang-up", "raspberrypi", "arduino", - "terminal" + "terminal", ], screen: [ "sun", @@ -474,7 +467,7 @@ let vm = new Vue({ "eye", "eye-blocked", "eye-minus", - "eye-plus" + "eye-plus", ], programing: [ "c", @@ -493,9 +486,15 @@ let vm = new Vue({ "css3", "javascript", "typescript", + "bun", + "bun_col", "postgresql", + "meilisearch", + "elasticsearch", + "minio", "weaviate", "pinecone", + "n8n", "docker", "git", "gitea", @@ -504,6 +503,13 @@ let vm = new Vue({ "osm", "leaflet", "openai", + "qwen", + "deepseek", + "mistral", + "meta", + "grok", + "ollama", + "mcp", "jupyter", "fastapi", "blender", @@ -511,13 +517,9 @@ let vm = new Vue({ "inkscape", "affinitydesigner", "affinityphoto", - "affinitypublisher" - ], - spinners: [ - "spinner", - "spinner2", - "spinner3" + "affinitypublisher", ], + spinners: ["spinner", "spinner2", "spinner3"], license: [ "cc", "cc-zero", @@ -534,8 +536,8 @@ let vm = new Vue({ "wtfpl", "ofl", "mit", - "bsd" - ] - } - } -}).$mount('#root') + "bsd", + ], + }; + }, +}).$mount("#root"); diff --git a/proj/icons/index.html b/proj/icons/index.html index 34de124..b716d4b 100644 --- a/proj/icons/index.html +++ b/proj/icons/index.html @@ -1,224 +1,350 @@ - + - - - - - brz9 Icon Font - - + + + + + brz9 Icon Font + + - + + + +
+
+

Icon font

+

+ This icon font was created with + Icomoon. I tried to group them by category. You can download the + whole pack as a zip + here. This page can be used to copy the utf8 characters by + clicking on the icons. This can be useful to use them in + Inkscape or GIMP after installing the .ttf file on your + computer. By clicking on the name of the icon, the html span + with the appropriate class in your clipboard. +

+

+ You can import the icon font in your head tag using the link + below: +

+ + 
<link rel="stylesheet" href="https://file.brz9.dev/cdn/fonts/brz9-v2.6/style.css">
+ +

+ (but please be aware that the link might break at some + point, you'd better download the zip file and host it + yoursel) +

- - + -
+
+

OS

+
+
+ +
+
+

Music Streaming

+
+
+ +
+
+

Payment

+
+
+ +
+
+

Navigation

+
+
+ +
+
+

Form

+
+
+ +
+
+

Network

+
+
+ +
+
+

Alert

+
+
+ +
+
+

Time

+
+
+ +
+
+

Login

+
+
+ +
+
+

AFK Navigation

+
+
+ +
+
+

Fediverse

+
+
+ +
+
+

Social Network

+
+
+ +
+
+

Privacy

+
+
+ +
+
+

Communication

+
+
+ +
+
+

Edit

+
+
+ +
+
+

Keyboard

+
+
+ +
+
+

Media

+
+
+ +
+
+

Files

+
+
+ +
+
+

Devices

+
+
+ +
+
+

Screen

+
+
+ +
+
+

Programming

+
+
+ +
+
+

Spinners

+

To make this kind of spinner:

+
+ +
+

You can use the following:

+
+
+ +
+
+

License

+
+
+ +
+
+

Politics

+
+
+ +
+
+
-
-

Icon font

-

This icon font was created with Icomoon. I tried to group them by category. You can download the whole pack as a zip here. This page can be used to copy the utf8 characters by clicking on the icons. This can be useful to use them in Inkscape or GIMP after installing the .ttf file on your computer. By clicking on the name of the icon, the html span with the appropriate class in your clipboard.

- -

You can import the icon font in your head tag using the link below:

- 
<link rel="stylesheet" href="https://file.brz9.dev/cdn/fonts/brz9-v2.5/style.css">
 -

(but please be aware that the link might break at some point, you'd better download the zip file and host it yoursel)

- - - -
- - -

OS

-
-
- -
+ + + +
-

Music Streaming

-
-
- -
-
-

Payment

-
-
- -
-
-

Navigation

-
-
- -
-
-

Form

-
-
- -
-
-

Network

-
-
- -
-
-

Alert

-
-
- -
-
-

Time

-
-
- -
-
-

Login

-
-
- -
-
-

AFK Navigation

-
-
- -
-
-

Fediverse

-
-
- -
-
-

Social Network

-
-
- -
-
-

Privacy

-
-
- -
-
-

Communication

-
-
- -
-
-

Edit

-
-
- -
-
-

Keyboard

-
-
- -
-
-

Media

-
-
- -
-
-

Files

-
-
- -
-
-

Devices

-
-
- -
-
-

Screen

-
-
- -
-
-

Programming

-
-
- -
-
-

Spinners

-

To make this kind of spinner:

-
- -
-

You can use the following:

-
-
- -
-
-

License

-
-
- -
-
-

Politics

-
-
- -
-
- - - - - - -
- -
- - - - - - - - \ No newline at end of file + + + + + +