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

v2.4 icon added

This commit is contained in:
ed barz 2023-09-28 16:18:10 +02:00
parent f48355078b
commit 7bd9f80d93
3 changed files with 805 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

488
proj/icons-v2.4/icons.js Normal file
View File

@ -0,0 +1,488 @@
Vue.component('icon', {
template: `
<div class="single-icon">
<span
v-bind:class="this.class"
v-on:click="copyToClipboard(utf8)"
class="actual-icon"
ref="icon"></span>
<span
class="copy-icon-popup"
v-bind:class="{ 'success': isCopied}"
ref="element">Copied!</span>
<p
class="icon-name"
v-on:click="copyToClipboard(span)"
ref="span">{{ this.name }}</p>
</div>
`,
props: ['name'],
data() {
return {
utf8: '',
isCopied: false
}
},
computed: {
class: function () {
return "brz9-icon-" + this.name;
},
span: function () {
return '<span class="brz9-icon-' + this.name + '"></span>';
}
},
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('"', '')
}
})
let vm = new Vue({
data() {
return {
os: [
"gnu",
"debian",
"yunohost",
"void",
"archlinux",
"gentoo",
"redhat",
"fedora",
"manjaro",
"linuxmint",
"freebsd",
"apple",
"windows"
],
streaming: [
"bandcamp",
"spotify",
"applemusic",
"soundcloud",
"tidal"
],
payment: [
"cart",
"price-tag",
"price-tags",
"barcode",
"qrcode",
"ticket",
"credit-card",
"visa",
"mastercard",
"applepay",
"paypal",
"stripe",
"bitcoin",
"dash",
"monero",
"ethereum",
"ltc",
"woocommerce",
"liberapay",
"patreon",
"tipeee",
"flattr"
],
navigation: [
"arrow-down",
"arrow-down-left",
"arrow-down-right",
"arrow-left",
"arrow-right",
"arrow-up",
"arrow-up-left",
"arrow-up-right",
"chevron-circle-down",
"chevron-circle-left",
"chevron-circle-right",
"chevron-circle-up",
"chevron-down",
"chevron-left",
"chevron-right",
"chevron-up",
"circle-down",
"circle-left",
"circle-right",
"circle-up",
"zoom-in",
"zoom-out",
"undo",
"redo",
"undo-arrow",
"redo-arrow",
"forward-arrow",
"reply-arrow",
"envelope",
"envelope-open",
"bubble",
"bubbles",
"bubbles2",
"shrink",
"shrink2",
"enlarge",
"enlarge2",
"share",
"share-out",
"search",
"plus",
"minus",
"cross",
"checkmark",
"checkmark-outline",
"link",
"embed",
"embed-slash"
],
form: [
"radio-checked",
"radio-checked-alt",
"radio-unchecked",
"checkbox-checked",
"checkbox-unchecked"
],
network: [
"tree",
"cloud",
"cloud-check",
"cloud-download",
"cloud-upload",
"upload",
"download",
"switch",
"sphere",
"earth",
"power",
"power-cord",
"wifi"
],
alert: [
"warning",
"info",
"question",
"cancel-circle",
"blocked",
"notification",
"floppy-disk",
"trophy",
"newspaper",
"pacman",
"music",
"leaf",
"gift",
"flag",
"bug",
"bell",
"bin",
"bin-alt",
"book",
"books",
"bookmark",
"bookmarks",
"attachment",
"address-book",
"accessibility"
],
time: [
"calendar",
"clock",
"clock2",
"alarm"
],
login: [
"user",
"users",
"enter",
"exit",
"equalizer",
"equalizer2",
"cog"
],
afknav: [
"compass",
"compass2",
"location",
"location2",
"map",
"map2",
"home",
"office",
"lab",
"binoculars"
],
fediverse: [
"mastodon",
"diaspora",
"peertube",
"pixelfed",
"rss",
"rss-square"
],
socials: [
"instagram",
"threads",
"twitter",
"x",
"wordpress",
"nextcloud",
"dropbox",
"vk",
"tripadvisor",
"facebook",
"tiktok",
"twitch",
"kick",
"vimeo",
"youtube",
"reddit",
"blogger",
"medium",
"linkedin",
"fiverr",
"stackoverflow",
"quora",
"pinterest",
"tumblr",
"unsplash",
"pexels",
"behance",
"deviantart",
"dribbble",
"notion",
"pocket",
"feedly",
"steam"
],
privacy: [
"gpg",
"tor",
"signal",
"ublockorigin",
"riot"
],
spyware: [
"telegram",
"discord",
"whatsapp",
"skype",
"slack",
"messenger"
],
edit: [
"bold",
"italic",
"underline",
"strikethrough",
"ligature",
"sigma",
"omega",
"text-height",
"text-width",
"font-size",
"paragraph-center",
"paragraph-justify",
"paragraph-left",
"paragraph-right",
"stats-bars",
"stats-dots",
"pie-chart",
"scissors",
"crop",
"quill",
"pen",
"pencil",
"pencil2",
"quotes-left",
"quotes-right",
"copy",
"paste",
"paint-format",
"eyedropper",
"droplet",
"list-numbered",
"list-check",
"list-bullet",
"filter",
"sort-alpha-asc",
"sort-alpha-desc",
"sort-numberic-desc",
"sort-numeric-asc",
"table",
"table2"
],
ratings: [
"star-empty",
"star-full",
"star-half",
"heart",
"heart-broken"
],
keyboard: [
"tab",
"shift",
"ctrl",
"opt",
"command"
],
media: [
"play",
"pause",
"stop",
"previous",
"next",
"backward",
"forward",
"first",
"last",
"play-circle",
"pause-circle",
"stop-circle",
"previous-circle",
"next-circle",
"backward-circle",
"forward-circle",
"volume-decrease",
"volume-increase",
"volume-mute",
"volume-mute2",
"volume-low",
"volume-medium",
"volume-high",
"loop",
"loop2",
"shuffle",
"infinite",
"play-yt",
"eject",
"airplayaudio",
"airplayvideo"
],
files: [
"folder",
"folder-open",
"folder-download",
"folder-upload",
"folder-plus",
"folder-minus",
"image",
"images",
"file-empty",
"file-music",
"file-picture",
"file-play",
"file-text2",
"file-video",
"file-zip",
"files-empty",
"box-add",
"box-remove",
"film"
],
devices: [
"display",
"tablet",
"mobile",
"tv",
"video-camera",
"camera",
"headphones",
"mic",
"printer",
"keyboard",
"phone",
"phone-hang-up",
"raspberrypi",
"arduino",
"terminal"
],
screen: [
"sun",
"brightness-contrast",
"contrast",
"eye",
"eye-blocked",
"eye-minus",
"eye-plus"
],
programing: [
"c",
"go",
"python",
"ruby",
"rust",
"php",
"vue-dot-js",
"react",
"angular",
"svelte",
"npm",
"html5",
"css3",
"javascript",
"typescript",
"postgresql",
"docker",
"git",
"gitea",
"github",
"gitlab",
"openai",
"jupyter",
"fastapi",
"blender",
"adobe",
"inkscape",
"affinitydesigner",
"affinityphoto",
"affinitypublisher",
""
],
spinners: [
"spinner",
"spinner2",
"spinner3"
],
license: [
"cc",
"cc-zero",
"cc-sa",
"cc-nd",
"cc-nc",
"cc-remix",
"cc-by",
"cc-share",
"amicale",
"gpl",
"lgpl",
"agpl",
"wtfpl",
"ofl",
"mit",
"bsd"
]
}
}
}).$mount('#root')

201
proj/icons-v2.4/index.html Normal file
View File

@ -0,0 +1,201 @@
<!DOCTYPE html>
<html lang="en">
<head>
<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>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://file.brz9.dev/cdn/fonts/brz9-v2.4/brz9-v2.4.css">
</head>
<body>
<div id="root">
<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.4.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>
<ul>
<li><a href="#icon-os">OS</a></li>
<li><a href="#icon-mu">Music Streaming</a></li>
<li><a href="#icon-pay">Payment</a></li>
<li><a href="#icon-nav">Navigation</a></li>
<li><a href="#icon-form">Form</a></li>
<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-fediverse">Fediverse</a></li>
<li><a href="#icon-social">Social Network</a></li>
<li><a href="#icon-privacy">Privacy</a></li>
<li><a href="#icon-communication">Communication</a></li>
<li><a href="#icon-edit">Edit</a></li>
<li><a href="#icon-keyboard">Keyboard</a></li>
<li><a href="#icon-media">Media</a></li>
<li><a href="#icon-file">Files</a></li>
<li><a href="#icon-device">Devices</a></li>
<li><a href="#icon-screen">Screen</a></li>
<li><a href="#icon-programming">Programming</a></li>
<li><a href="#icon-spin">Spinners</a></li>
<li><a href="#icon-license">License</a></li>
</ul>
</nav>
<h2 id="icon-os">OS</h2>
<div class="icongrid">
<div class="icon-grid-item" v-for="icon in os" :key="icon">
<icon :name="icon"></icon>
</div>
</div>
<h2 id="icon-mu">Music Streaming</h2>
<div class="icongrid">
<div class="icon-grid-item" v-for="icon in streaming" :key="icon">
<icon :name="icon"></icon>
</div>
</div>
<h2 id="icon-pay">Payment</h2>
<div class="icongrid">
<div class="icon-grid-item" v-for="icon in payment" :key="icon">
<icon :name="icon"></icon>
</div>
</div>
<h2 id="icon-nav">Navigation</h2>
<div class="icongrid">
<div class="icon-grid-item" v-for="icon in navigation" :key="icon">
<icon :name="icon"></icon>
</div>
</div>
<h2 id="icon-form">Form</h2>
<div class="icongrid">
<div class="icon-grid-item" v-for="icon in form" :key="icon">
<icon :name="icon"></icon>
</div>
</div>
<h2 id="icon-network">Network</h2>
<div class="icongrid">
<div class="icon-grid-item" v-for="icon in network" :key="icon">
<icon :name="icon"></icon>
</div>
</div>
<h2 id="icon-alert">Alert</h2>
<div class="icongrid">
<div class="icon-grid-item" v-for="icon in alert" :key="icon">
<icon :name="icon"></icon>
</div>
</div>
<h2 id="icon-time">Time</h2>
<div class="icongrid">
<div class="icon-grid-item" v-for="icon in time" :key="icon">
<icon :name="icon"></icon>
</div>
</div>
<h2 id="icon-login">Login</h2>
<div class="icongrid">
<div class="icon-grid-item" v-for="icon in login" :key="icon">
<icon :name="icon"></icon>
</div>
</div>
<h2 id="icon-afknav">AFK Navigation</h2>
<div class="icongrid">
<div class="icon-grid-item" v-for="icon in afknav" :key="icon">
<icon :name="icon"></icon>
</div>
</div>
<h2 id="icon-fediverse">Fediverse</h2>
<div class="icongrid">
<div class="icon-grid-item" v-for="icon in fediverse" :key="icon">
<icon :name="icon"></icon>
</div>
</div>
<h2 id="icon-social">Social Network</h2>
<div class="icongrid">
<div class="icon-grid-item" v-for="icon in socials" :key="icon">
<icon :name="icon"></icon>
</div>
</div>
<h2 id="icon-privacy">Privacy</h2>
<div class="icongrid">
<div class="icon-grid-item" v-for="icon in privacy" :key="icon">
<icon :name="icon"></icon>
</div>
</div>
<h2 id="icon-communication">Communication</h2>
<div class="icongrid">
<div class="icon-grid-item" v-for="icon in spyware" :key="icon">
<icon :name="icon"></icon>
</div>
</div>
<h2 id="icon-edit">Edit</h2>
<div class="icongrid">
<div class="icon-grid-item" v-for="icon in edit" :key="icon">
<icon :name="icon"></icon>
</div>
</div>
<h2 id="icon-keyboard">Keyboard</h2>
<div class="icongrid">
<div class="icon-grid-item" v-for="icon in keyboard" :key="icon">
<icon :name="icon"></icon>
</div>
</div>
<h2 id="icon-media">Media</h2>
<div class="icongrid">
<div class="icon-grid-item" v-for="icon in media" :key="icon">
<icon :name="icon"></icon>
</div>
</div>
<h2 id="icon-file">Files</h2>
<div class="icongrid">
<div class="icon-grid-item" v-for="icon in files" :key="icon">
<icon :name="icon"></icon>
</div>
</div>
<h2 id="icon-device">Devices</h2>
<div class="icongrid">
<div class="icon-grid-item" v-for="icon in devices" :key="icon">
<icon :name="icon"></icon>
</div>
</div>
<h2 id="icon-screen">Screen</h2>
<div class="icongrid">
<div class="icon-grid-item" v-for="icon in screen" :key="icon">
<icon :name="icon"></icon>
</div>
</div>
<h2 id="icon-programming">Programming</h2>
<div class="icongrid">
<div class="icon-grid-item" v-for="icon in programing" :key="icon">
<icon :name="icon"></icon>
</div>
</div>
<h2 id="icon-spin">Spinners</h2>
<p>To make this kind of spinner:</p>
<div class="spindemo">
<span class="brz9-icon-spinner2"></span>
</div>
<p>You can use the following:</p>
<div class="icongrid">
<div class="icon-grid-item" v-for="icon in spinners" :key="icon">
<icon :name="icon"></icon>
</div>
</div>
<h2 id="icon-license">License</h2>
<div class="icongrid">
<div class="icon-grid-item" v-for="icon in license" :key="icon">
<icon :name="icon"></icon>
</div>
</div>
<a href="#root" class="go-up" alt="">
<span class="brz9-icon-chevron-up"></span>
</a>
</main>
</div>
</body>
<script src="https://ed.brz9.dev/assets/js/vue.min.js"></script>
<script src="icons.js"></script>
</html>

116
proj/icons-v2.4/style.css Normal file
View File

@ -0,0 +1,116 @@
@import url(../../assets/css/style.css);
div.single-icon {
display: inline-block;
width: 120px;
height: 80px;
margin: 10px;
text-align: center;
}
div.single-icon p {
margin-top: 15px;
font-size: 1rem;
line-height: normal;
}
div.single-icon span.actual-icon {
font-size: 2rem;
color: inherit !important;
}
div.single-icon span.actual-icon::before {
color: inherit !important;
}
span.copy-icon-popup {
position: absolute;
background-color: var(--success);
color: white;
font-size: 1.5rem;
padding: 10px;
transform: rotate(12deg);
opacity: 0;
}
span.copy-icon-popup.success {
animation: fade-in 2s forwards;
}
@keyframes fade-in {
0% {
opacity: 0;
scale: 0%;
}
10% {
opacity: 1;
scale: 100%;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
span.actual-icon, p.icon-name {
cursor: pointer;
}
/* center div.icon-grid on the screen
div.icongrid {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
width: 100%;
height: 100%;@
margin: 0;
margin-top: 20px;
padding: 0;
}*/
div.icon-grid-item {
display: inline-flex;
border: 4px solid var(--white);
padding-top: 10px;
padding-bottom: 10px;
margin: -2px;
}
div.spindemo span {
display: inline-block;
position: relative;
animation: spin 1s linear infinite;
color: var(--fail);
font-size: 3rem;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
a.go-up {
position: fixed;
bottom: 20px;
right: 20px;
font-size: 2rem;
padding: 10px;
z-index: 100;
}
/*smooth scroll on the whole page on a click*/
html {
scroll-behavior: smooth;
transition: 5s;
}
h2 {
padding-top: 20px;
}