@ownclouders/design-system/dist/types/components/OcIcon/OcIcon.vue.d.ts

ownCloud Design System is based on VueDesign Systems and is used to design ownCloud UI components

import { AvailableSizeType } from '../../helpers';
/**
 * @component OcIcon
 * @description
 * Icons are used to visually communicate core parts of the product and available actions.
 * They can act as wayfinding tools to help users more easily understand where they are in the product.
 *
 * @Accessibility
 * - Pass a label to the icon via the `accessibleLabel` property. The component will automatically add a `title` element which is also referenced by its ID via `aria-labelledby`.
 * - Omit `accessibleLabel` if the icon is decorative. In this case:
 *   - `aria-hidden` is set to `true`.
 *   - `focusable` is set to `false`.
 *   - All aria-related properties are removed or emptied.
 *
 * @props
 * @prop {string} [name='info'] - The name of the icon to display.
 * @prop {'fill'|'line'|'none'} [fillType='fill'] - The fill type of the icon.
 * @prop {string} [accessibleLabel=''] - Descriptive text for screen readers. Leave empty for decorative icons.
 * @prop {string} [type='span'] - The HTML element used for the icon.
 * @prop {AvailableSizeType} [size='medium'] - The size of the icon. Options: `xsmall`, `small`, `medium`, `large`, `xlarge`, `xxlarge`.
 * @prop {'passive'|'primary'|'danger'|'success'|'warning'|'brand'|'inherit'} [variation='passive'] - Style variation for additional meaning.
 * @prop {string} [color=''] - Overwrites the color of the icon.
 *
 * @emits
 * @event loaded - Emitted when the SVG is successfully loaded.
 *
 * @example
 * <template>
 *   <!-- Example of a decorative icon -->
 *   <OcIcon name="check" size="large" variation="success" />
 *
 *   <!-- Example of an accessible icon -->
 *   <OcIcon
 *     name="alert"
 *     fillType="line"
 *     accessibleLabel="Warning: Action required"
 *     size="medium"
 *     variation="warning"
 *   />
 *
 *   <!-- Example of a custom-colored icon -->
 *   <OcIcon
 *     name="star"
 *     color="#FFD700"
 *     size="small"
 *     variation="brand"
 *   />
 * </template>
 */
interface Props {
    name?: string;
    fillType?: 'fill' | 'line' | 'none' | string;
    accessibleLabel?: string;
    type?: string;
    size?: AvailableSizeType | string;
    variation?: 'passive' | 'primary' | 'danger' | 'success' | 'warning' | 'brand' | 'inherit' | string;
    color?: string;
}
declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
    loaded: () => any;
}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
    onLoaded?: () => any;
}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
export default _default;