472 lines
9.1 KiB
JavaScript
472 lines
9.1 KiB
JavaScript
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",
|
|
"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",
|
|
"bitcoin",
|
|
"monero",
|
|
"ethereum",
|
|
"ltc",
|
|
"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",
|
|
"twitter",
|
|
"wordpress",
|
|
"nextcloud",
|
|
"dropbox",
|
|
"vk",
|
|
"tripadvisor",
|
|
"facebook",
|
|
"tiktok",
|
|
"twitch",
|
|
"vimeo",
|
|
"youtube",
|
|
"reddit",
|
|
"blogger",
|
|
"medium",
|
|
"stackoverflow",
|
|
"quora",
|
|
"pinterest",
|
|
"tumblr",
|
|
"unsplash",
|
|
"behance",
|
|
"deviantart",
|
|
"dribbble",
|
|
"notion",
|
|
"pocket",
|
|
"feedly",
|
|
"steam"
|
|
],
|
|
privacy: [
|
|
"gnuprivacyguard",
|
|
"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",
|
|
"jupyter",
|
|
"blender",
|
|
"inkscape"
|
|
],
|
|
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')
|