@aotearoan/neon
Version:
Neon is a lightweight design library of Vue 3 components with minimal dependencies.
87 lines (86 loc) • 3.09 kB
TypeScript
import type { NeonFunctionalColor } from '@/common/enums/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<{
/**
* The name of an icon registered in the icon registry.
*/
name: {
type: StringConstructor;
required: true;
};
/**
* 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;
};
}, {
attrs: {
[x: string]: unknown;
};
icon: import("vue").ComputedRef<string>;
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
/**
* The name of an icon registered in the icon registry.
*/
name: {
type: StringConstructor;
required: true;
};
/**
* 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;
};
}>>, {
disabled: boolean;
color: NeonFunctionalColor;
inverse: boolean;
}, {}>;
export default _default;