@aotearoan/neon
Version:
Neon is a lightweight design library of Vue 3 components with minimal dependencies.
104 lines (103 loc) • 3.74 kB
TypeScript
import type { NeonFunctionalColor } from '@/model/common/color/NeonFunctionalColor';
/**
* <p>A component for rendering SVG images. These images are generally, but not limited to, <em>icons</em>. This
* component can render any SVG of any size. Size is not restricted in the NeonIcon component but rather in the
* components using the icons. Generally, when talking about icons, this component is only used to build other
* components. But you may also find it useful for rendering SVG images, e.g. illustrations.</p>
*
* <p>There is an icon registry where strings containing SVGs can be registered with a name and that name can be used
* with the NeonIcon component to render the image. Use the classes <em>neon-svg--fill</em> and <em>neon-svg--stroke</em>
* in the SVG elements to automatically apply the functional colors.</p>
*
* <p>This provides the advantage of only registering the icons you actually need, dynamically switching colors in
* Typescript/CSS without using a large icon font and not having to duplicate icon images to support multiple
* color variations (including light and dark modes).</p>
*
* For more detailed information please see <a href="/presentation/icon">Icons</a>.
*/
declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
/**
* The name of an icon registered in the icon registry.
*/
name: {
type: StringConstructor;
required: true;
};
/**
* An id to inject into the icon. This is necessary for rendering clipPaths correctly if the same icon is used
* multiple times on a page as the ids need to be unique.
*/
id: {
type: StringConstructor;
default: null;
};
/**
* The color to render the icon. By default, it will be the current text color (light text in dark mode or dark text in light mode).
*/
color: {
type: () => NeonFunctionalColor;
default: null;
};
/**
* Set the icon color to the inverse text color
*/
inverse: {
type: BooleanConstructor;
default: boolean;
};
/**
* Apply a disabled style to the icon
*/
disabled: {
type: BooleanConstructor;
default: boolean;
};
}>, {
sanitizedAttributes: import("vue").ComputedRef<{
[x: string]: unknown;
}>;
icon: import("vue").ComputedRef<string | undefined>;
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
/**
* The name of an icon registered in the icon registry.
*/
name: {
type: StringConstructor;
required: true;
};
/**
* An id to inject into the icon. This is necessary for rendering clipPaths correctly if the same icon is used
* multiple times on a page as the ids need to be unique.
*/
id: {
type: StringConstructor;
default: null;
};
/**
* The color to render the icon. By default, it will be the current text color (light text in dark mode or dark text in light mode).
*/
color: {
type: () => NeonFunctionalColor;
default: null;
};
/**
* Set the icon color to the inverse text color
*/
inverse: {
type: BooleanConstructor;
default: boolean;
};
/**
* Apply a disabled style to the icon
*/
disabled: {
type: BooleanConstructor;
default: boolean;
};
}>> & Readonly<{}>, {
color: NeonFunctionalColor;
id: string;
inverse: boolean;
disabled: boolean;
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
export default _default;