@nextcloud/vue
Version:
Nextcloud vue components
100 lines (99 loc) • 2.82 kB
JavaScript
import '../assets/NcIconSvgWrapper-BwsJ8wBM.css';
import Vue from "vue";
import DOMPurify from "dompurify";
import { n as normalizeComponent } from "./_plugin-vue2_normalizer-DU4iP6Vu.mjs";
const _sfc_main = {
name: "NcIconSvgWrapper",
props: {
/**
* Set if the icon should be used as inline content e.g. within text.
* By default the icon is made a block element for use inside `icon`-slots.
*/
inline: {
type: Boolean,
default: false
},
/**
* Raw SVG string to render
*/
svg: {
type: String,
default: ""
},
/**
* Label of the icon, used in aria-label
*/
name: {
type: String,
default: ""
},
/**
* Raw SVG path to render. Takes precedence over the SVG string in the `svg` prop.
*/
path: {
type: String,
default: ""
},
/**
* Size of the icon to show. Only use if not using within an icon slot.
* Defaults to 20px which is the Nextcloud icon size for all icon slots.
* @default 20
*/
size: {
type: [Number, String],
default: 20,
validator: (value) => typeof value === "number" || value === "auto"
}
},
computed: {
/**
* Icon size used in CSS
*/
iconSize() {
return typeof this.size === "number" ? "".concat(this.size, "px") : this.size;
},
cleanSvg() {
if (!this.svg || this.path) {
return;
}
const svg = DOMPurify.sanitize(this.svg);
const svgDocument = new DOMParser().parseFromString(svg, "image/svg+xml");
if (svgDocument.querySelector("parsererror")) {
Vue.util.warn("SVG is not valid");
return "";
}
if (svgDocument.documentElement.id) {
svgDocument.documentElement.removeAttribute("id");
}
return svgDocument.documentElement.outerHTML;
},
attributes() {
return {
class: ["icon-vue", { "icon-vue--inline": this.inline }],
style: {
"--icon-size": this.iconSize
},
role: "img",
"aria-hidden": !this.name ? true : void 0,
"aria-label": this.name || void 0
};
}
}
};
var _sfc_render = function render() {
var _vm = this, _c = _vm._self._c;
return !_vm.cleanSvg ? _c("span", _vm._b({}, "span", _vm.attributes, false), [_c("svg", { attrs: { "viewBox": "0 0 24 24", "xmlns": "http://www.w3.org/2000/svg" } }, [_c("path", { attrs: { "d": _vm.path } })])]) : _c("span", _vm._b({ domProps: { "innerHTML": _vm._s(_vm.cleanSvg) } }, "span", _vm.attributes, false));
};
var _sfc_staticRenderFns = [];
var __component__ = /* @__PURE__ */ normalizeComponent(
_sfc_main,
_sfc_render,
_sfc_staticRenderFns,
false,
null,
"2d0a4d76"
);
const NcIconSvgWrapper = __component__.exports;
export {
NcIconSvgWrapper as N
};