Провайдеры Iconify
По умолчанию Web Host использует онлайн-источники Iconify. Настраивайте AppConfig.iconify.providers, только если развертыванию нужен другой источник. Локальная коллекция Tabler на этой странице является явным вариантом для автономного развертывания и не меняет источник по умолчанию.
Проверенная базовая версия Web Host для прямого использования AppConfig.iconify — 1.0.64. Проверенная базовая версия для развертываний через Facade указана в разделе Модуль Facade.
Настройка провайдера
Ключи providers задаются по ID провайдера Iconify. Используйте пустой ключ ("") для встроенного провайдера или ID в нижнем регистре с дефисами для именованного провайдера. Каждое значение содержит непустой массив resources с HTTP(S)-источниками. Стандартный Iconify использует эти ресурсы как резервные источники. Он может запомнить сработавший источник и начинать с него последующие запросы. Host не добавляет публичный источник в заданный массив.
interface IconifyConfig {
providers?: Record<string, {
resources: string[]
path?: string
timeout?: number
} | null> | null
}
По умолчанию path равен / и нормализуется со слешами в начале и конце. timeout по умолчанию равен 5000 миллисекундам. Допустимы положительные целые числа до 60000. В resources указываются источники. Не добавляйте учетные данные, запрос, фрагмент или базовый путь.
Как использовать Wippy без сети
Для автономного развертывания нужно самостоятельно разместить копию коллекции на сервере, доступном браузеру. Публичный CDN Web Host работает онлайн и не предоставляет приложение или другие службы без сети. В выпуск Host входит iconify/tabler.json.
const config = {
iconify: {
providers: {
"": {
resources: ["http://localhost:5173"],
path: "/iconify/",
},
},
},
}
Для локальной проверки разместите результат сборки Host так, чтобы dist/iconify/tabler.json был доступен по /iconify/tabler.json. В развертывании используйте собственный источник и версионный путь:
const deploymentConfig = { iconify: { providers: { "": { resources: ["https://wippy-host.internal"], path: "/webcomponents-<host-release>/iconify/" } } } }
Замените <host-release> закрепленным выпуском Host. Сервер должен возвращать JSON с application/json и разрешать браузерные запросы от источника приложения. Iconify отправляет ?icons=...; статическая коллекция игнорирует запрос и возвращает все данные. Поиск не поддерживается.
Коллекция основана на Tabler 3.41.1, лицензия MIT, автор Paweł Kuna. Метаданные указывают 6092 значка; источник содержит 6140 определений и 184 псевдонима. SHA-256: cf18f905479c5ca5d0be13217e17d240deea3c457b70b2ae84bcaa0d5a98a51c.
Правильная раздача зеркала
Настройка статического сервера входит в автономную конфигурацию. Сервер должен возвращать файл с типом application/json, разрешать запросы браузера с источника приложения через CORS, сжимать JSON при поддержке браузера и возвращать настоящий статус 404, если коллекции нет. Не кэшируйте отсутствующий файл как успешный ответ. Для версионированных путей можно использовать неизменяемое кэширование. Для пути без версии требуйте повторную проверку с помощью ETag или Last-Modified.
Пример Nginx предполагает, что файлы находятся по пути /srv/wippy/host/webcomponents-<host-release>/iconify/tabler.json, приложение использует точно указанный ниже источник, а TLS-сертификаты настроены вне этого фрагмента. Замените источник и корневой каталог значениями своего развертывания. Этот фрагмент не устанавливает модули Nginx и не настраивает TLS:
server {
location ~ ^/webcomponents-[^/]+/iconify/ {
root /srv/wippy/host;
default_type application/json;
add_header Access-Control-Allow-Origin "https://app.example.com" always;
add_header Vary Origin always;
add_header Cache-Control "public, max-age=31536000, immutable";
gzip on;
gzip_types application/json;
gzip_vary on;
try_files $uri =404;
}
}
Для пути без версии замените неизменяемую политику кэширования политикой повторной проверки, например Cache-Control: no-cache, и включите ETag или Last-Modified. Перед использованием зеркала проверьте, что сервер действительно сжимает JSON, задает ожидаемые правила кэширования, CORS и MIME и возвращает настоящий 404 для отсутствующего файла.
Именованные провайдеры и значки
Именованный провайдер задается как @провайдер:префикс:имя, например @tenant:tabler:home. Vue и пользовательский элемент используют одинаковое имя.
const namedConfig = { iconify: { providers: { tenant: { resources: ["https://icons.example.internal"], path: "/tenant/" } } } }
<script setup lang="ts">
import { Icon } from '@iconify/vue'
</script>
<Icon icon="@tenant:tabler:home" />
<iconify-icon icon="@tenant:tabler:settings"></iconify-icon>
Источник покрывает только запросы коллекций значков. API, шрифты и другие ресурсы Kickside требуют отдельной офлайн-поддержки.
Сброс и обновление
Если iconify не задан в начальной конфигурации, используются онлайн-значения по умолчанию. Если поле отсутствует в последующем обновлении, текущая конфигурация Iconify сохраняется. iconify: null или providers: null сбрасывает весь раздел и удаляет именованные настройки. null для пустого ключа сбрасывает только встроенный провайдер. null для именованного провайдера отключает его пространство имен. Пропущенные ключи сохраняют маршруты. Пустой providers не выполняет сброс.
Сгенерированная схема проверяет форму JSON и ограничения полей. Проверка во время выполнения также подтверждает, что resources являются HTTP(S)-источниками, а path соответствует правилам Host. Поэтому значение, прошедшее проверку схемы, всё ещё может быть отклонено во время выполнения. Разрешены только providers и поля resources, path и timeout у каждого провайдера. Недопустимая начальная настройка игнорируется, поэтому остаются онлайн-значения по умолчанию. Недопустимое обновление сохраняет последнюю корректную конфигурацию Iconify; другие корректные поля AppConfig можно обновить. Host передает timeout в API провайдера стандартного Iconify и настраивает каждое хранилище только один раз. Стандартный Iconify выполняет загрузку значков, выбор источника, повторы и кэширование. Он может запомнить сработавший источник и начинать с него последующие запросы. Чтобы применить изменения провайдера, перезагрузите документ. iconifyIcons управляет загрузкой и регистрацией элемента <iconify-icon>, но не источником. AppConfig передает явно заданные данные дочерним приложениям. Схемы 2.0 и 2.1 мигрируют в 2.2. См. Последовательность bootstrap, Инъекция CSS, Proxy API и Facade.
Provider trust and updates
Используйте только доверенные источники провайдера. Страница отображает содержимое значков как SVG-разметку. Для новых данных SetConfig используйте wippy-context-2.2. Версионированные данные wippy-context-2.0 и wippy-context-2.1 принимаются и мигрируют; данные 1.0 без схемы не могут содержать новые поля iconify и importMap.
Версии схемы
Для новых настроек используйте wippy-context-2.2. Версионированные входные данные wippy-context-2.0 и wippy-context-2.1 мигрируют вперед. Данные без $schema проходят через устаревший преобразователь. Он сопоставляет известные поля старого формата, но не передает новые поля iconify и importMap. Созданная схема проверяет структуру JSON и ограничения полей. Среда выполнения дополнительно проверяет HTTP(S)-источники и правила Host для путей. Поэтому значение может пройти проверку схемы, но быть отклонено при выполнении.
Оверлей разработки
Запустите приложение через Vite с включенным @wippy-fe/vite-plugin; плагин передает оверлею настройки Wippy из package.json. Нажмите плавающую кнопку Wippy Dev, откройте Configuration, добавьте iconify.providers в App Config (JSON) и нажмите Accept. При первом запуске после этого приложение завершит загрузку. Браузер сохраняет принятые настройки. После изменения настроек уже работающего приложения перезагрузите его перед проверкой: Accept сохраняет настройки, но не обновляет конфигурацию, уже используемую приложением. При включенном Auto-accept консоль также выводит Config updated (reload to apply).