1 changed files with 0 additions and 90 deletions
@ -1,90 +0,0 @@ |
|||
<template> |
|||
<svg |
|||
v-if="iconData" |
|||
:class="svgClass" |
|||
:fill="fill" |
|||
:stroke="stroke" |
|||
:viewBox="viewBox" |
|||
xmlns="http://www.w3.org/2000/svg" |
|||
> |
|||
<path v-for="(path, index) in iconData.paths" :key="index" v-bind="path" /> |
|||
</svg> |
|||
</template> |
|||
|
|||
<script lang="ts"> |
|||
import { Component, Prop, Vue } from "vue-facing-decorator"; |
|||
import icons from "../assets/icons.json"; |
|||
import { logger } from "../utils/logger"; |
|||
|
|||
/** |
|||
* Icon path interface |
|||
*/ |
|||
interface IconPath { |
|||
d: string; |
|||
fillRule?: string; |
|||
clipRule?: string; |
|||
strokeLinecap?: string; |
|||
strokeLinejoin?: string; |
|||
strokeWidth?: string | number; |
|||
fill?: string; |
|||
stroke?: string; |
|||
} |
|||
|
|||
/** |
|||
* Icon data interface |
|||
*/ |
|||
interface IconData { |
|||
paths: IconPath[]; |
|||
} |
|||
|
|||
/** |
|||
* Icons JSON structure |
|||
*/ |
|||
interface IconsJson { |
|||
[key: string]: IconPath | IconData; |
|||
} |
|||
|
|||
/** |
|||
* Icon Renderer Component |
|||
* |
|||
* This component loads SVG icon definitions from a JSON file and renders them |
|||
* as SVG elements. It provides a clean way to use icons without cluttering |
|||
* templates with long SVG path definitions. |
|||
* |
|||
* @author Matthew Raymer |
|||
* @version 1.0.0 |
|||
* @since 2024 |
|||
*/ |
|||
@Component({ |
|||
name: "IconRenderer", |
|||
}) |
|||
export default class IconRenderer extends Vue { |
|||
@Prop({ required: true }) readonly iconName!: string; |
|||
@Prop({ default: "h-5 w-5" }) readonly svgClass!: string; |
|||
@Prop({ default: "none" }) readonly fill!: string; |
|||
@Prop({ default: "currentColor" }) readonly stroke!: string; |
|||
@Prop({ default: "0 0 24 24" }) readonly viewBox!: string; |
|||
|
|||
/** |
|||
* Get the icon data for the specified icon name |
|||
* |
|||
* @returns {IconData | null} The icon data object or null if not found |
|||
*/ |
|||
get iconData(): IconData | null { |
|||
const icon = (icons as IconsJson)[this.iconName]; |
|||
if (!icon) { |
|||
logger.warn(`Icon "${this.iconName}" not found in icons.json`); |
|||
return null; |
|||
} |
|||
|
|||
// Convert single path to array format for consistency |
|||
if ("d" in icon) { |
|||
return { |
|||
paths: [icon as IconPath], |
|||
}; |
|||
} |
|||
|
|||
return icon as IconData; |
|||
} |
|||
} |
|||
</script> |
Loading…
Reference in new issue