ed
/
ed.brz9.dev
1
1
Fork 0
Code Issues Pull Requests Releases Wiki Activity

icon update

This commit is contained in:
ed barz 2024-04-11 19:26:25 +02:00
parent f59c8d21a5
commit 37ca374476
5 changed files with 108 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
proj/icons/._style.css Normal file
View File

Binary file not shown.

BIN
proj/icons/brz9-v2.1.zip
View File

Binary file not shown.

72
proj/icons/icons.js
View File

@ -53,11 +53,52 @@ Vue.component('icon', {
let span = document.querySelector(query)
let style = window.getComputedStyle(span, ':before')
let content = style.getPropertyValue('content')
console.log(content)
//console.log(content)
this.utf8 = content.replace('"', '').replace('"', '')
}
})
Vue.component('copyfontimportlink', {
template: `
<div class="font-import-link-container" v-on:click="copyToClipboard(importLink)" ref="link">
<slot></slot>
<span
class="copy-icon-popup"
v-bind:class="{ 'success': isCopied}"
ref="element">Copied!</span>
</div>
`,
data() {
return {
importLink: '<link rel="stylesheet" href="https://file.brz9.dev/cdn/fonts/brz9-v2.5/style.css">',
isCopied: false
}
},
computed: {
displayText: function () {
html_text = "&lt;link rel=&quot;stylesheet&quot; href=&quot;https://file.brz9.dev/cdn/fonts/brz9-v2.5/style.css&quot;&gt;";
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() {
return {
@ -80,6 +121,7 @@ let vm = new Vue({
"bandcamp",
"spotify",
"applemusic",
"deezer",
"soundcloud",
"tidal"
],
@ -95,12 +137,16 @@ let vm = new Vue({
"mastercard",
"applepay",
"paypal",
"stripe",
"bitcoin",
"dash",
"monero",
"ethereum",
"ltc",
"woocommerce",
"liberapay",
"patreon",
"ulule",
"tipeee",
"flattr"
],
@ -240,7 +286,9 @@ let vm = new Vue({
],
socials: [
"instagram",
"threads",
"twitter",
"x",
"wordpress",
"nextcloud",
"dropbox",
@ -249,16 +297,20 @@ let vm = new Vue({
"facebook",
"tiktok",
"twitch",
"kick",
"vimeo",
"youtube",
"reddit",
"blogger",
"medium",
"linkedin",
"fiverr",
"stackoverflow",
"quora",
"pinterest",
"tumblr",
"unsplash",
"pexels",
"behance",
"deviantart",
"dribbble",
@ -392,6 +444,12 @@ let vm = new Vue({
"box-remove",
"film"
],
politics: [
"lfi",
"pcf",
"ps",
"faumar"
],
devices: [
"display",
"tablet",
@ -422,6 +480,7 @@ let vm = new Vue({
"c",
"go",
"python",
"zig",
"ruby",
"rust",
"php",
@ -435,15 +494,24 @@ let vm = new Vue({
"javascript",
"typescript",
"postgresql",
"weaviate",
"pinecone",
"docker",
"git",
"gitea",
"github",
"gitlab",
"osm",
"leaflet",
"openai",
"jupyter",
"fastapi",
"blender",
"inkscape"
"adobe",
"inkscape",
"affinitydesigner",
"affinityphoto",
"affinitypublisher"
],
spinners: [
"spinner",

31
proj/icons/index.html
View File

@ -4,9 +4,13 @@
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<title>brz9 Icon Font</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://file.brz9.dev/cdn/fonts/brz9-v2.3/brz9-v2.3.css">
<link rel="stylesheet" href="https://file.brz9.dev/cdn/fonts/brz9-v2.5/style.css">
<link rel="stylesheet" href="https://file.brz9.dev/web/js/highlight/hlb9c.css"/>
</head>
<body>
@ -14,9 +18,13 @@
<main>
<h1>Icon font</h1>
<p>This icon font was created with <a href="https://icomoon.io/" target="_blank" rel="noopener noreferrer" class="ext">Icomoon</a>. I tried to group them by category. You can download the whole pack as a zip <a href="https://file.brz9.dev/cdn/fonts/brz9-v2.3.zip" target="_blank" rel="noopener noreferrer" class="ext">here</a>. 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.</p>
<p>This icon font was created with <a href="https://icomoon.io/" target="_blank" rel="noopener noreferrer" class="ext">Icomoon</a>. I tried to group them by category. You can download the whole pack as a zip <a href="https://file.brz9.dev/cdn/fonts/brz9-v2.5.zip" target="_blank" rel="noopener noreferrer" class="ext">here</a>. 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.</p>
<nav>
<p>You can import the icon font in your head tag using the link below:</p>
<copyfontimportlink><pre><code class="language-xml">&lt;link rel=&quot;stylesheet&quot; href=&quot;https://file.brz9.dev/cdn/fonts/brz9-v2.5/style.css&quot;&gt;</code></pre></copyfontimportlink>
<p><i>(but please be aware that the link might break at some point, you'd better download the zip file and host it yoursel)</i></p>
<nav class="main_nav">
<ul>
<li><a href="#icon-os">OS</a></li>
<li><a href="#icon-mu">Music Streaming</a></li>
@ -26,6 +34,8 @@
<li><a href="#icon-network">Network</a></li>
<li><a href="#icon-alert">Alert</a></li>
<li><a href="#icon-time">Time</a></li>
<li><a href="#icon-login">Login</a></li>
<li><a href="#icon-afknav">AFK Navigation</a></li>
<li><a href="#icon-fediverse">Fediverse</a></li>
<li><a href="#icon-social">Social Network</a></li>
<li><a href="#icon-privacy">Privacy</a></li>
@ -39,10 +49,13 @@
<li><a href="#icon-programming">Programming</a></li>
<li><a href="#icon-spin">Spinners</a></li>
<li><a href="#icon-license">License</a></li>
<li><a href="#icon-politics">Politics</a></li>
</ul>
</nav>
<section class="icon-grids">
<h2 id="icon-os">OS</h2>
<div class="icongrid">
<div class="icon-grid-item" v-for="icon in os" :key="icon">
@ -186,6 +199,14 @@
<icon :name="icon"></icon>
</div>
</div>
<h2 id="icon-politics">Politics</h2>
<div class="icongrid">
<div class="icon-grid-item" v-for="icon in politics" :key="icon">
<icon :name="icon"></icon>
</div>
</div>
</section>
<a href="#root" class="go-up" alt="">
<span class="brz9-icon-chevron-up"></span>
@ -198,4 +219,6 @@
</body>
<script src="https://ed.brz9.dev/assets/js/vue.min.js"></script>
<script src="icons.js"></script>
<script src="https://file.brz9.dev/web/js/highlight/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</html>

11
proj/icons/style.css
View File

@ -21,6 +21,7 @@ div.single-icon span.actual-icon {
div.single-icon span.actual-icon::before {
color: inherit !important;
}
span.copy-icon-popup {
@ -113,4 +114,14 @@ html {
h2 {
padding-top: 20px;
}
nav.main_nav {
position: fixed;
left: 0px;
top: 50px;
}
.font-import-link-container {
cursor: pointer;
}