PFM Shared

Appearance

Иконки ​

Превью всех иконок

Размеры:

16px

20px

24px

32px

Назад

Вперёд

Наверх

Вниз

Лево

Право

Верх

Низ

Сортировка

Повторить

Репост

Сортировка 2

Геоточка

Ссылки

Посты

Коллекции

Публикации

Поиск

Лайк

В избранное

Заблокировать

Открыть

Очистить историю сообщений

Прикрепить

Закрыть

Удалить

Редактировать

Добавить историю

Покинуть

Добавить

Поделиться

Копировать

Загрузить

Выбрать

Ограничить доступ

Фильтровать

Отправить

Войти

Выйти

Закрепить

Отправить сообщением

Переместить в коллекцию

Переместить в новую коллекцию

Убрать из коллекции

Расформировать коллекцию

Генерировать ключ

Отменить отправку сообщения

Успешно

Личное

Лента

Главная (бывшая)

Настройки

Помощь

Инфо

Жалоба

Хэштэг

Изображение

Просмотры перечёркнутые

Просмотры

Календарь

Облако

Новости

Чекин

Меню

Навигация

Меню@

Видео

Мир

Уведомления

Отключить Уведомления

QR

Камера

Маркер

Кошелёк

Статистика

Чат

Чат активен

Включить комментарии

Отключить комментарии

Написать чат

Написать сообщение

Сообщение

Профиль

Профиль 2

Подписан

Подписаться

Подписаться

Переместить в профиль

Сообщества

Редактировать профиль

Для разработчиков ​

Все иконки используем только через PfmIcon компонент. Цвета внутри SVG указанны как currentColor поэтому изменить цвет иконки можно просто повесив на неё стиль

Props ​

ts
    interface Props {
        name: PfmIconName; // название иконки из индекса
        // лежит в @/designSystem/icons/types.ts
        size?: '16' | '20' | '24' | '32';
        // Размер иконки по дефолту 24
    }

    const props = withDefaults(defineProps<Props>(), {
        size: '24'
    });

Использование ​

vue
<template>
    <PfmIcon
        name="Вперёд"
        size="32"
    />
</template>

Как добавить новую иконку ​

Добавить новую иконку можно только через обновление Shared либы. В качестве примера рассматривается добавление иконки - 'Редактировать профиль' Для начала находим нужную иконку в фигме

Важно

Нас интересует название иконки, её SVG и группа

Добавление названия иконки ​

ts
export const pfmIconNamesArray = [
    ...
    'Переместить в профиль',
    'Сообщества',
    'Редактировать профиль'
] as const;

// Тип PfmIconName собирает все строки в Union тип
export type PfmIconName = (typeof pfmIconNamesArray)[number];

Импорт иконки из фигмы ​

Экспортируем иконки из фигмы в SVG ​

Создание компонента обёртки ​

Создаём новый Vue компонент по следующему адрессу.

Важно

Несмотря на русскоязычное название иконки в фигме, компонент называем только на английском языке.

Так же компонент иконки обязательно должен иметь префикс Pfm

designSystem/icons/iconComponents/{НАЗВАНИЕ ГРУППЫ}/{НАВАНИЕ ИКОНКИ}.vue

Добавление возможности красить кнопки иконки ​

html
    <svg
        width="33"
        height="32"
        viewBox="0 0 33 32"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
    >
        <path
            fill-rule="evenodd"
            clip-rule="evenodd"
            d="{...}"
            fill="#333333" // [!code --]
            style="fill: #333333; fill: color(display-p3 0.2 0.2 0.2); fill-opacity: 1" // [!code --]
            fill="currentColor" // [!code ++]
        />
        <path
            d="M26 22L29 25"
            stroke="#333333" // [!code --]
            style="stroke: #333333; stroke: color(display-p3 0.2 0.2 0.2); stroke-opacity: 1" // [!code --]
            stroke="currentColor" // [!code ++]
            stroke-width="1.2"
            stroke-linecap="round"
            stroke-linejoin="round"
        />
    </svg>

Добавление иконки в провайдер иконок ​

ts
export const iconMap: Record<PfmIconName, Component> = {
    ...
    Подписан: defineAsyncComponent(() => import('@/designSystem/icons/iconComponents/profiles/PfmIsSubscribedIcon.vue')),
    Подписаться: defineAsyncComponent(() => import('@/designSystem/icons/iconComponents/profiles/PfmSubscribeIcon.vue')),
    'Переместить в профиль': defineAsyncComponent(() => import('@/designSystem/icons/iconComponents/profiles/PfmMoveToProfile.vue')),
    Сообщества: defineAsyncComponent(() => import('@/designSystem/icons/iconComponents/profiles/PfmCommunityIcon.vue')),
    'Редактировать профиль': defineAsyncComponent(() => import('@/designSystem/icons/iconComponents/profiles/PfmEditProfileIcon.vue'))  
}