icon font update
This commit is contained in:
parent
56dde57c35
commit
38b9b7aa3b
|
Before Width: | Height: | Size: 331 KiB After Width: | Height: | Size: 331 KiB |
|
|
@ -1,4 +1,4 @@
|
|||
Vue.component('icon', {
|
||||
Vue.component("icon", {
|
||||
template: `
|
||||
<div class="single-icon">
|
||||
<span
|
||||
|
|
@ -16,12 +16,12 @@ Vue.component('icon', {
|
|||
ref="span">{{ this.name }}</p>
|
||||
</div>
|
||||
`,
|
||||
props: ['name'],
|
||||
props: ["name"],
|
||||
data() {
|
||||
return {
|
||||
utf8: '',
|
||||
isCopied: false
|
||||
}
|
||||
utf8: "",
|
||||
isCopied: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
class: function () {
|
||||
|
|
@ -29,36 +29,36 @@ Vue.component('icon', {
|
|||
},
|
||||
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)
|
||||
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.$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')
|
||||
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('"', '')
|
||||
}
|
||||
})
|
||||
this.utf8 = content.replace('"', "").replace('"', "");
|
||||
},
|
||||
});
|
||||
|
||||
Vue.component('copyfontimportlink', {
|
||||
Vue.component("copyfontimportlink", {
|
||||
template: `
|
||||
<div class="font-import-link-container" v-on:click="copyToClipboard(importLink)" ref="link">
|
||||
<slot></slot>
|
||||
|
|
@ -70,34 +70,36 @@ Vue.component('copyfontimportlink', {
|
|||
`,
|
||||
data() {
|
||||
return {
|
||||
importLink: '<link rel="stylesheet" href="https://file.brz9.dev/cdn/fonts/brz9-v2.5/style.css">',
|
||||
isCopied: false
|
||||
}
|
||||
importLink:
|
||||
'<link rel="stylesheet" href="https://file.brz9.dev/cdn/fonts/brz9-v2.5/style.css">',
|
||||
isCopied: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
displayText: function () {
|
||||
html_text = "<link rel="stylesheet" href="https://file.brz9.dev/cdn/fonts/brz9-v2.5/style.css">";
|
||||
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;
|
||||
});
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
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");
|
||||
|
|
|
|||
|
|
@ -1,28 +1,62 @@
|
|||
<!DOCTYPE html>
|
||||
<!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">
|
||||
<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>brz9 Icon Font</title>
|
||||
<link rel="stylesheet" href="style.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"/>
|
||||
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://file.brz9.dev/cdn/fonts/brz9-v2.6/style.css"
|
||||
/>
|
||||
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://file.brz9.dev/web/js/highlight/hlb9c.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.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>
|
||||
<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.6.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>You can import the icon font in your head tag using the link below:</p>
|
||||
<copyfontimportlink><pre><code class="language-xml"><link rel="stylesheet" href="https://file.brz9.dev/cdn/fonts/brz9-v2.5/style.css"></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>
|
||||
<p>
|
||||
You can import the icon font in your head tag using the link
|
||||
below:
|
||||
</p>
|
||||
<copyfontimportlink>
|
||||
<pre><code class="language-xml"><link rel="stylesheet" href="https://file.brz9.dev/cdn/fonts/brz9-v2.6/style.css"></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>
|
||||
|
|
@ -54,131 +88,213 @@
|
|||
</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">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<div
|
||||
class="icon-grid-item"
|
||||
v-for="icon in programing"
|
||||
:key="icon"
|
||||
>
|
||||
<icon :name="icon"></icon>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -189,36 +305,46 @@
|
|||
</div>
|
||||
<p>You can use the following:</p>
|
||||
<div class="icongrid">
|
||||
<div class="icon-grid-item" v-for="icon in spinners" :key="icon">
|
||||
<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">
|
||||
<div
|
||||
class="icon-grid-item"
|
||||
v-for="icon in license"
|
||||
:key="icon"
|
||||
>
|
||||
<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">
|
||||
<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>
|
||||
</a>
|
||||
</main>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</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>
|
||||
<script>
|
||||
hljs.initHighlightingOnLoad();
|
||||
</script>
|
||||
</html>
|
||||
Loading…
Reference in New Issue