Add using a file as a plugin/theme’s icon
This commit is contained in:
parent
33488d716d
commit
9af8a71e17
|
@ -11,7 +11,7 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="bd-card">
|
<div class="bd-card">
|
||||||
<div class="bd-card-header">
|
<div class="bd-card-header">
|
||||||
<div class="bd-card-icon" :style="{backgroundImage: item.icon ? `url(${item.icon})` : null}">
|
<div class="bd-card-icon" :style="{backgroundImage: iconURL}">
|
||||||
<MiExtension v-if="!item.icon" :size="30" />
|
<MiExtension v-if="!item.icon" :size="30" />
|
||||||
</div>
|
</div>
|
||||||
<span>{{item.name}}</span>
|
<span>{{item.name}}</span>
|
||||||
|
@ -37,14 +37,41 @@
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
// Imports
|
// Imports
|
||||||
|
import { FileUtils, ClientLogger as Logger } from 'common';
|
||||||
|
import path from 'path';
|
||||||
import { MiExtension } from '../common';
|
import { MiExtension } from '../common';
|
||||||
import ContentAuthor from './ContentAuthor.vue';
|
import ContentAuthor from './ContentAuthor.vue';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
props: ['item'],
|
props: ['item'],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
iconURL: undefined
|
||||||
|
};
|
||||||
|
},
|
||||||
components: {
|
components: {
|
||||||
ContentAuthor,
|
ContentAuthor,
|
||||||
MiExtension
|
MiExtension
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
async getIconURL() {
|
||||||
|
if (!this.item.icon) return;
|
||||||
|
|
||||||
|
try {
|
||||||
|
if (this.item.icon.substr(0, 5) === 'data:') {
|
||||||
|
return `url(${this.item.icon})`;
|
||||||
|
}
|
||||||
|
|
||||||
|
const iconPath = path.join(this.item.contentPath, this.item.icon);
|
||||||
|
const iconURL = await FileUtils.toDataURI(iconPath, this.item.info.icon_type);
|
||||||
|
return `url(${iconURL})`;
|
||||||
|
} catch (err) {
|
||||||
|
Logger.err('ContentCard', ['Invalid icon URL', this.item]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
async created() {
|
||||||
|
this.iconURL = await this.getIconURL();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -24,7 +24,8 @@
|
||||||
],
|
],
|
||||||
"version": 1.0,
|
"version": 1.0,
|
||||||
"description": "Example Plugin Description.\n\nDescriptions are preformatted (you can use newlines).",
|
"description": "Example Plugin Description.\n\nDescriptions are preformatted (you can use newlines).",
|
||||||
"icon": "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FscXVlXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMjAwMCAyMDAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAyMDAwIDIwMDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnPjxwYXRoIGZpbGw9IiMzRTgyRTUiIGQ9Ik0xNDAyLjIsNjMxLjdjLTkuNy0zNTMuNC0yODYuMi00OTYtNjQyLjYtNDk2SDY4LjR2NzE0LjFsNDQyLDM5OFY0OTAuN2gyNTdjMjc0LjUsMCwyNzQuNSwzNDQuOSwwLDM0NC45SDU5Ny42djMyOS41aDE2OS44YzI3NC41LDAsMjc0LjUsMzQ0LjgsMCwzNDQuOGgtNjk5djM1NC45aDY5MS4yYzM1Ni4zLDAsNjMyLjgtMTQyLjYsNjQyLjYtNDk2YzAtMTYyLjYtNDQuNS0yODQuMS0xMjIuOS0zNjguNkMxMzU3LjcsOTE1LjgsMTQwMi4yLDc5NC4zLDE0MDIuMiw2MzEuN3oiLz48cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMTI2Mi41LDEzNS4yTDEyNjIuNSwxMzUuMmwtNzYuOCwwYzI2LjYsMTMuMyw1MS43LDI4LjEsNzUsNDQuM2M3MC43LDQ5LjEsMTI2LjEsMTExLjUsMTY0LjYsMTg1LjNjMzkuOSw3Ni42LDYxLjUsMTY1LjYsNjQuMywyNjQuNmwwLDEuMnYxLjJjMCwxNDEuMSwwLDU5Ni4xLDAsNzM3LjF2MS4ybDAsMS4yYy0yLjcsOTktMjQuMywxODgtNjQuMywyNjQuNmMtMzguNSw3My44LTkzLjgsMTM2LjItMTY0LjYsMTg1LjNjLTIyLjYsMTUuNy00Ni45LDMwLjEtNzIuNiw0My4xaDcyLjVjMzQ2LjIsMS45LDY3MS0xNzEuMiw2NzEtNTY3LjlWNzE2LjdDMTkzMy41LDMxMi4yLDE2MDguNywxMzUuMiwxMjYyLjUsMTM1LjJ6Ii8+PC9nPjwvc3ZnPg=="
|
"icon": "icon.svg",
|
||||||
|
"icon_type": "image/svg+xml"
|
||||||
},
|
},
|
||||||
"main": "index.js",
|
"main": "index.js",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
|
|
@ -0,0 +1,8 @@
|
||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||||
|
<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 2000 2000" enable-background="new 0 0 2000 2000" xml:space="preserve">
|
||||||
|
<g>
|
||||||
|
<path fill="#3E82E5" d="M1402.2,631.7c-9.7-353.4-286.2-496-642.6-496H68.4v714.1l442,398V490.7h257c274.5,0,274.5,344.9,0,344.9H597.6v329.5h169.8c274.5,0,274.5,344.8,0,344.8h-699v354.9h691.2c356.3,0,632.8-142.6,642.6-496c0-162.6-44.5-284.1-122.9-368.6C1357.7,915.8,1402.2,794.3,1402.2,631.7z"/>
|
||||||
|
<path fill="#FFFFFF" d="M1262.5,135.2L1262.5,135.2l-76.8,0c26.6,13.3,51.7,28.1,75,44.3c70.7,49.1,126.1,111.5,164.6,185.3c39.9,76.6,61.5,165.6,64.3,264.6l0,1.2v1.2c0,141.1,0,596.1,0,737.1v1.2l0,1.2c-2.7,99-24.3,188-64.3,264.6c-38.5,73.8-93.8,136.2-164.6,185.3c-22.6,15.7-46.9,30.1-72.6,43.1h72.5c346.2,1.9,671-171.2,671-567.9V716.7C1933.5,312.2,1608.7,135.2,1262.5,135.2z"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
After Width: | Height: | Size: 1.0 KiB |
Loading…
Reference in New Issue