Icon

Import Permalink to "Import"

import ProximaIcon from 'proxima-vue/icon';

Playground Permalink to "Playground"

import { ref } from 'vue';
import ProximaIcon from 'proxima-vue/icon';

<ProximaIcon

/>

Multicolor Permalink to "Multicolor"

Для создания многоцветной иконки необходимо использовать пропс color="multi" и добавить специальные data атрибуты SVG элементам, чтобы управлять их цветом через кастомные свойства: To create a multicolored icon, you need to use the color="multi" prop and add special data attributes to SVG elements to control their color through custom properties:

• data-stroke="primary"data-stroke="secondary"data-stroke="tertiary"
• data-fill="primary"data-fill="secondary"data-fill="tertiary"

<ProximaIcon size="xxl" color="multi">
  <svg viewBox="0 0 16 16" width="16" height="16" fill="none" stroke="currentColor">
    <path data-stroke="primary" d="M1.5 10v4.5h13V10" />
    <path data-stroke="secondary" d="M8 1.5V11m3.5-3.5-3.5 4-3.5-4" />
  </svg>
</ProximaIcon>

:root {
  --icon-primary-color: #42b883;
  --icon-secondary-color: #2f77ec;
}

Skeleton Permalink to "Skeleton"

Режим плейсхолдера во время загрузки Placeholder mode on loading

<div data-ghost="true">
  <ProximaIcon>
    <svg>...</svg>
  </ProximaIcon>
</div>

Accessibility Permalink to "Accessibility"

По умолчанию иконка скрыта для вспомогательных технологий с помощью атрибута By default, the icon is hidden for assistive technologies using the attribute aria-hidden="true".

BEM Permalink to "BEM"

Блок компонента icon, модификаторы (создаются автоматически на основе пропсов): Component block icon, modifiers (automatically created based on props):

• icon_color_mono icon_color_multi
• icon_view_plain icon_view_outline icon_view_rect
• icon_size_xxs icon_size_xs icon_size_s icon_size_normal icon_size_m icon_size_l icon_size_xl icon_size_xxl
• icon_round_soft icon_round_full icon_round_none
• icon_theme_[name]

CSS Permalink to "CSS"

Слой компонента @layer proxima.icon, также вы можете гибко cтилизовать компонент через кастомные свойства: Component layer @layer proxima.icon, also you can style the component flexibly through custom properties:

--icon-width: var(--icon-size);
--icon-height: var(--icon-size);

--icon-vertical-align: middle;
--icon-border-radius: 0;

/* Stroke */
--icon-stroke-linecap: round;
--icon-stroke-linejoin: round;
--icon-stroke-width: revert-layer;

/* Color */
--icon-color: inherit;
--icon-primary-color: currentColor;
--icon-secondary-color: currentColor;
--icon-tertiary-color: currentColor;

/* View rect */
--icon-view-rect-background: none;

/* View outline */
--icon-view-outline-background: none;
--icon-border-style: solid;
--icon-border-color: currentColor;

/*
  Sizes
*/

--icon-size-xxs: 0.625em;
--icon-padding-xxs: 0.0625em;
--icon-border-width-xxs: 0.0625em;

--icon-size-xs: 0.75em;
--icon-padding-xs: 0.0625em;
--icon-border-width-xs: 0.0625em;

--icon-size-s: 0.875em;
--icon-padding-s: 0.0625em;
--icon-border-width-s: 0.0625em;

/* Normal */
--icon-size: 1em;
--icon-padding: 0.09375em;
--icon-border-width: 0.09375em;

--icon-size-m: 1.25em;
--icon-padding-m: 0.125em;
--icon-border-width-m: 0.125em;

--icon-size-l: 1.5em;
--icon-padding-l: 0.1875em;
--icon-border-width-l: 0.125em;

--icon-size-xl: 2em;
--icon-padding-xl: 0.25em;
--icon-border-width-xl: 0.125em;

--icon-size-xxl: 3em;
--icon-padding-xxl: 0.5em;
--icon-border-width-xxl: 0.1875em;

Theme Permalink to "Theme"

Используя кастомные свойства и специальный пропс theme можно легко создавать свои темы: By using custom properties and the prop theme, you can easily create your own themes:

<ProximaIcon size="xxl" theme="dim">
  <svg viewBox="0 0 16 16" width="16" height="16" fill="none" stroke="currentColor">
    <path d="M1.5 10v4.5h13V10" />
    <path d="M8 1.5V11m3.5-3.5-3.5 4-3.5-4" />
  </svg>
</ProximaIcon>

.icon_theme_dim {
  --icon-color: #777;
}

Props Permalink to "Props"

interface ProximaIconProps {
  tag?: string
  color?: 'mono' | 'multi'
  view?: 'plain' | 'outline' | 'rect'
  size?: ProximaSize
  round?: ProximaRound
  theme?: string
}