Иконки

Обзор

В проектах apx используются svg-икноки.

Что бы иконка появилась в проекте, ее svg-файл необходимо положить в каталог модуля assets/icons. Имя такого файла будет использовано в качестве имени иконки.

Иконки могут быть цветными или черно-белыми.

Для удобства группировки в каталоге assets/icons можно создавать подкаталоги и располагать иконки там.

После этого, можно использовать иконку по имени везде, где можно в Quasar.

Допустим, что у нас имеется файл frontend/assets/icons/air1.svg. Тогда мы можем использовать иконку air1:

<q-icon name="air1"/>
<jc-btn icon="air1" label="Кнопка"/>

Регистрация иконок

Все иконки из всех файлов assets/icons/**/*.svg доступны в виртуальном модуле all/icons. При запуске приложения их необходимо зарегистрировать:

import * as apx from '@jandcode/apx'
import icons from 'all/icons'

apx.icons.registerIcons(icons)

Вы можете зарегистрировать и другие иконки. Вот пример с пояснениями:

apx.icons.registerIcons({

    // регистрируем иконку с именем icon1, как алиас для svg-иконки air1
    'icon1': 'svg:air1',

    // регистрируем иконку с именем png1, как http-ссылку на указанный файл png
    'png1': require('./images/png1.png'),

    // регистрируем иконку с именем svg1, как http-ссылку на указанный файл svg
    'svg1': require('./images/svg1.png'),

    // регистрируем иконку с именем svg1, как текст svg-файла
    'svg2': `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">...</svg>`
})

Все файлы в модуле с маской assets/icons/*.js рассматриваются как модули, которые экспортируют по умолчанию информацию для регистрации иконок. Например, создадим файл frontend/assets/icons/std-icons.js:

export default {
    'std-air': 'svg:air1',
}

Теперь мы можем использовать иконку std-air.

Иконки из Quasar.iconSet

Все иконки из Quasar.iconSet зарегистрированы с именами quasar.PATH, где PATH - путь в iconSet.

<q-icon name="quasar.datetime.today"/>

Перекрытие

Если в каком-то модуле, который Вы используете (например @jandcode/apx-ui), определена иконка, то в своем проекте можно создать иконку с таким же именем, она перекроет иконку из используемого модуля.

Требования к svg-файлам

Из svg-файлов необходимо убрать атрибуты width и height, однако атрибут viewBox обязателен.

Если иконка черно-белая, удалите из нее всю информацию о цвете, иначе цвет иконки нельзя будет поменять в приложении. Цвет currentColor можно использовать.

Просмотр всех иконок

Для просмотра всех иконок (в режиме разработки) перейдите по адресу http://localhost:8080/jc/_tst/frontend и выберете "Tools/Все иконки (all/icons)".