Icon иконки: Векторные иконки и стикеры — PNG, SVG, EPS, PSD и CSS

Jetpack Compose | Иконки и компоненты IconButton и IconToggleButton

Последнее обновление: 20.10.2021

Компонент IconButton представляет кликабельную иконку, по нажатию на которую можно выполнить некоторые действия. То есть, фактически он объединяет иконку и кнопку. Обычно этот компонент применяется в панелях инстументов.

Данный компонент имеет следующие параметры:

@Composable
fun IconButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    content: () -> Unit
): @Composable Unit

Параметры функции компонента:

• onClick: представляет функцию-обработчик нажатия кнопки

• modifier: предствляет объект Modifier, который определяет модификаторы кнопки

• enabled: значение типа Boolean устанавливает, доступна ли кнопка для нажатия.

  По умолчанию равно true (то есть кнопка доступна для нажатия)

• interactionSource: представляет объект типа MutableInteractionSource, который устанавливает поток взаимодействий для кнопки. Значение по умолчанию — remember { MutableInteractionSource() }

• content: содержимое кнопки — обычно представляет иконку в виде объекта типа Icon. В качестве иконки можно использовать встроенные иконки из пакета androidx.compose.material.icons.Icons. А также можно создавать и использовать свои иконки.

Определим простейшую кнопку-иконку:

package com.example.helloapp

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.material.Icon
import androidx.compose.material.IconButton
import androidx.compose.material.icons.Icons
import androidx.compose.

  
 material.icons.filled.Info

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            IconButton(onClick = {  }) {
                Icon(Icons.Filled.Info, contentDescription = "Информация о приложении")
            }
        }
    }
}

Компонент Icon, который задает иконку, имеет ряд версий:

@Composable
fun Icon(
    imageVector: ImageVector,
    contentDescription: String?,
    modifier: Modifier = Modifier,
    tint: Color = LocalContentColor.current.copy(alpha = LocalContentAlpha.current)
): @Composable Unit

@Composable
fun Icon(
    bitmap: ImageBitmap,
    contentDescription: String?,
    modifier: Modifier = Modifier,
    tint: Color = LocalContentColor.current.copy(alpha = LocalContentAlpha.current)
): @Composable Unit

@Composable
fun Icon(
    painter: Painter,
    contentDescription: String?,
    modifier: Modifier = Modifier,
    tint: Color = LocalContentColor.  current.copy(alpha = LocalContentAlpha.current)
): @Composable Unit

Во всех трех версиях первый параметр представляет рисунок, который отображается на иконке. В примере выше этому параметру передавалась встроенная иконка Icons.Filled.Info. Jetpack Compose располагает большим набором встроенных иконок. Весь этот набор можно посмотреть по ссылке Icons

Второй параметр — contentDescription

Третий параметр — modifier — объект Modifier, который, как и для других компонентов, задает модификаторы для данного компонента.

Четвертый параметр — tint устанавливает цвет иконки.

Например, немного изменить иконку:

package com.example.helloapp

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx. activity.compose.setContent
import androidx.compose.foundation.layout.size
import androidx.compose.material.Icon
import androidx.compose.material.IconButton
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Info
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            IconButton(onClick = {  }) {
                Icon(
                    Icons.Filled.Info,
                    contentDescription = "Информация о приложении", modifier = Modifier.size(80.dp),
                    tint = Color.Red
                )
            }
        }
    }
}

IconToggleButton

Компонент IconToggleButton фактически предоставляет IconButton, который может находиться в двух состояниях. Он принимает следующие параметры:

@Composable
fun IconToggleButton(
    checked: Boolean,
    onCheckedChange: (Boolean) -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    content: () -> Unit
): @Composable Unit

Параметры функции компонента:

• checked: значение типа Boolean, которое указывает, будет ли компонент выбран (значение true) или нет (false)

• onCheckedChange: представляет функцию-обработчик нажатия кнопки

• modifier: представляет объект Modifier, который определяет модификаторы кнопки

• enabled: значение типа Boolean устанавливает, доступна ли кнопка для нажатия. По умолчанию равно true (то есть кнопка доступна для нажатия)

• interactionSource: представляет объект типа MutableInteractionSource, который устанавливает поток взаимодействий для кнопки. Значение по умолчанию — remember { MutableInteractionSource() }

• content: содержимое кнопки — обычно представляет иконку в виде объекта типа Icon. В качестве иконки можно использовать встроенные иконки из пакета androidx.compose.material.icons.Icons. А также можно создавать и использовать свои иконки.

Пример с IconToggleButton:

package com.example.helloapp

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Row
import androidx.compose.material.Icon
import androidx.compose.material.IconToggleButton
import androidx.compose.material.Text
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Info
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.
 
 compose.ui.Alignment
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.sp

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            val checked = remember { mutableStateOf(false) }
            Row(verticalAlignment = Alignment.CenterVertically){
                IconToggleButton(checked = checked.value, onCheckedChange = { checked.value = it }) {
                    Icon(
                        Icons.Filled.Info,
                        contentDescription = "Информация о приложении",
                        tint = if (checked.value) Color(0xFFEC407A) else Color(0xFFB0BEC5)
                    )
                }
                Text(
                    text = if(checked.value) "Выбрано" else "Не выбрано",
                    fontSize = 28.sp
                )
            }
        }
    }
}

В данном случае для отслеживания, выбрана ли кнопка, определена переменная checked, в зависимости от значения которой устанавливаются тест компонента Text и цвет иконки в IconToggleButton

НазадСодержаниеВперед

‎App Store: ICON — Иконки для Приложений

Снимки экрана (iPhone)

Описание

Bored of your standard home screen?
Customize it with a unique collection of icons, backgrounds, and widgets.

ICONS Themer includes more than 13 amazing and unique packages created by professional designers for you.
We have trendy packs like Christmas, Neon, Retro, and Tropical Lava.

Our benefits:
— More than 800 custom icons
— Weekly updates
— Unique designs
— No Ads

Payment will be charged to your Apple ID account at the confirmation of purchase. Subscription automatically renews unless it is canceled at least 24 hours before the end of the current period. Your account will be charged for renewal within 24 hours prior to the end of the current period. You can manage and cancel your subscriptions by going to your account settings on the App Store after purchase.

Terms of Use: https://icons.asapvisuals.com/legal/terms-of-use
Privacy Policy: https://icons.asapvisuals.com/legal/privacy-policy

Версия 1.0.12

Stability improvements.

Оценки и отзывы

Оценок: 248

Самая классное в мири что у меня есть

❤️❤️❤️❤️

К cожелению платно

Вcе

Недочёт

Приложение норм НО я устанавливала приложение чтобы поменять Все иконки а не 3-5

Разработчик ASAP Visuals, Inc. указал, что в соответствии с политикой конфиденциальности приложения данные могут обрабатываться так, как описано ниже. Подробные сведения доступны в политике конфиденциальности разработчика.

Данные, используе­мые для отслежи­вания информации

Следующие данные могут использоваться для отслеживания информации о пользователе в приложениях и на сайтах, принадлежащих другим компаниям:

• Покупки
• Идентифика­торы
• Данные об использова­нии
• Диагностика

Не связанные с пользова­телем данные

Может вестись сбор следующих данных, которые не связаны с личностью пользователя:

• Покупки
• Идентифика­торы
• Данные об использова­нии
• Диагностика

Конфиденциальные данные могут использоваться по-разному в зависимости от вашего возраста, задействованных функций или других факторов. Подробнее

Информация

Провайдер

ASAP Visuals, Inc.

Размер

126,3 МБ

Категория

Графика и дизайн

Возраст

4+

Copyright

© Icons by ASAP Visuals, Inc. 2023

Цена

Бесплатно

• Поддержка приложения
• Политика конфиденциальности

Другие приложения этого разработчика

Вам может понравиться

икон и иконоборчество в Византии | Эссе | Музей Метрополитен

Определение икон
Иконы (от греческого eikones ) — это священные изображения, представляющие святых, Христа и Богородицу, а также сюжетные сцены, такие как Крещение Христа (2013. 980a–d) и Распятие. В то время как сегодня этот термин наиболее тесно связан с росписью деревянных панелей, в Византии иконы могли быть изготовлены из любых материалов, включая мрамор, слоновую кость, керамику, драгоценный камень, драгоценный металл, эмаль, ткань, фреску и мозаику.

Форма и назначение икон
Размер икон варьируется от миниатюрных до монументальных. Одни подвешивались на шею в виде подвесок, другие (так называемые «триптихи») имели по бокам панели, которые можно было открывать и закрывать, тем самым активируя икону. Иконы можно было крепить на шесте или раме и нести в бой, как это было предложено для иконы святого Димитрия (1970.324.3). В качестве альтернативы иконы могли носить более постоянный характер, например, фресковые и мозаичные изображения, украшающие церковные интерьеры. В византийском богословии созерцание икон позволяло зрителю напрямую общаться с представленными священными фигурами, а через иконы молитвы человека обращались непосредственно к запрошенному святому или святой фигуре. Среди просьб были чудесные исцеления и удача.

Acheiropoieta, или Иконы, «нерукотворные (человеческие)»
Иконы, созданные по воле Божией, были известны как acheiropoieta («нерукотворные (человеческие)»). Эта категория чудотворных образов пользовалась особым почитанием на протяжении всей истории Византии. Значительное количество acheiropoieta возникло в ранневизантийский период, до появления иконоборчества в начале восьмого века. Самая известная acheiropoieta включала Мандилион, белую ткань, на которой был отпечатан лик Христа, и Керамион, керамическую плитку, на которой был запечатлен лик Христа с Мандилиона. Способность к чудесному воспроизведению была общей чертой acheiropoieta.

Икона Богородицы Одигитрии
К XII веку деревянное панно с изображением Богородицы Одигитрии («Путеводительницы») было приписано чудотворному творению евангелиста Луки. В этой композиции Богородица баюкает Младенца Христа в левой руке и указывает на него правой рукой.

Образ Богородицы Одигитрии, одной из самых известных византийских икон всех времен, широко копировался в Византии во всех средствах массовой информации (17.190.103). Первоначальная деревянная икона, приписываемая святому Луке, хранилась в Одигонском монастыре в Константинополе, основании, прославленном своим священным источником, воды которого исцеляли слепых, ведомых к источнику монастырской братией. Образ Одигитрии был не только чрезвычайно популярен на Востоке, но и оказал огромное влияние на изображения Богородицы и Младенца Христа в Западной Европе в средние века и в эпоху Возрождения (60.173).

Определение иконоборчества
Иконоборчество буквально означает «ломание изображений» и относится к повторяющемуся историческому импульсу ломать или уничтожать изображения по религиозным или политическим причинам. Например, в Древнем Египте резные лики некоторых фараонов были стерты их преемниками; во время Французской революции изображения королей были испорчены.

В византийском мире иконоборчество относится к теологическим дебатам, в которых участвуют как византийская церковь, так и государство. Споры длились примерно столетие, в 726–87 и 815–43 годах. В эти десятилетия имперское законодательство запрещало производство и использование фигуральных изображений; одновременно крест пропагандировался как наиболее приемлемая декоративная форма для византийских церквей. Археологические данные свидетельствуют о том, что в некоторых регионах Византии, включая Константинополь и Никею, существующие иконы были уничтожены или замазаны. Очень немногие ранневизантийские иконы пережили иконоборческий период; Заметными исключениями являются тканые иконы, расписные иконы, хранящиеся в монастыре Святой Екатерины на горе Синай в Египте, и миниатюрные иконы, найденные на византийских монетах, в том числе на монетах Юстиниана II (годы правления 685–689).5; 705–11).

Иконоборчество: источник дебатов
Иконоборческие дебаты сосредоточились на уместном использовании икон в религиозном почитании и точном соотношении между священным персонажем и его/ее изображением. В основе этого спора лежал страх, что зритель неправильно направит свое благоговение на изображение, а не на святую личность, изображенную на изображении. Ветхозаветные запреты на поклонение истуканам (Исход 20:4) послужили одним из важнейших прецедентов византийского иконоборчества. Непосредственные причины этого кризиса горячо оспаривались учеными. Среди многих предполагаемых причин — подъем ислама и желание императора узурпировать религиозную власть и средства.

Иконы после иконоборчества
Иконоборческая полемика оказала глубокое влияние на создание византийских изображений после их повторного введения в 843 году. Изменения, вызванные иконоборческими дебатами, включали эволюцию отдельных типов портретов для отдельных святых; разработка более унифицированных программ росписи церковных стен мозаикой и фреской; и растущая популярность некоторых сюжетов, таких как Анастасис Христа или «Мучительные ада» (17.190.715a,b) и Коимезис или «Засыпание» Богородицы (17.19). 0,132).

В средние и поздние византийские периоды продолжали копироваться почтенные типы икон более ранних веков, а также развивались новые композиции икон. Одним из примеров является биографическая икона со сценами из жизни святого, добавленными по периферии иконы, изображающей святого в центре. Второй новой формой является икона в миниатюрной мозаике, как, например, в иконе митрополита «Богоматерь с младенцем» (2008.352). Добавление окладов из драгоценных металлов или скульптурных покровов к иконам также становилось все более популярным в средне- и поздневизантийский периоды (17–19 гг.).0,644).

Цитата

Брукс, Сара. «Иконы и иконоборчество в Византии». В Хайльбрунн Хронология истории искусств . Нью-Йорк: Метрополитен-музей, 2000–. http://www.metmuseum.org/toah/hd/icon/hd_icon.htm (первоначально опубликовано в октябре 2001 г., последняя редакция — в августе 2009 г.)

Дополнительное чтение

Бараш, Моше. Иконка: Этюды по истории одной идеи . Нью-Йорк: издательство Нью-Йоркского университета, 19.92.

Барбер, Чарльз. Фигура и подобие: о пределах изображения в византийском иконоборчестве . Принстон: Издательство Принстонского университета, 2002.

Бельтинг, Ганс. Сходство и присутствие: история образа до эпохи искусства . Чикаго: University of Chicago Press, 1994.

Брубейкер, Лесли, Джон Халдон и Роберт Оустерхаут. Византия в эпоху иконоборчества (ок. 680–850 гг.): Источники: аннотированный обзор . Олдершот: Ашгейт, 2001.

Эванс, Хелен С. и Уильям Д. Уиксом, ред. Слава Византии: искусство и культура средневизантийской эпохи, 843–1261 гг. н.э. . Каталог выставки. Нью-Йорк: Метрополитен-музей, 1997. См. в MetPublications

Эванс, Хелен С., изд. Византия: вера и сила (1261–1557) . Каталог выставки. Нью-Йорк: Метрополитен-музей, 2004. См. в MetPublications

Карлин-Хейтер, Патрисия. «Иконоборчество». В г. Оксфордская история Византии , под редакцией Сирила Манго, стр. 153–62. Нью-Йорк: издательство Оксфордского университета, 2002.

Пеликан Ярослав. Imago Dei: Византийская апология икон . Вашингтон, округ Колумбия: Национальная художественная галерея, 1990.

Пенчева, Бисера В. Иконы и держава: Богородица в Византии . Университетский парк: издательство Пенсильванского государственного университета, 2006.

Вейцманн, Курт, изд. Эпоха духовности: позднеантичное и раннехристианское искусство, с третьего по седьмой век . Каталог выставки. Нью-Йорк: Метрополитен-музей, 1979. См. в MetPublications

Дополнительные эссе Сары Брукс

• Брукс, Сара. «Византия (ок. 330–1453)». (первоначально опубликовано в октябре 2001 г., последняя редакция — в октябре 2009 г.)
• Брукс, Сара. «Византийское государство при Юстиниане I (Юстиниане Великом)». (первоначально опубликовано в октябре 2001 г., последняя редакция в апреле 2009 г.)
• Брукс, Сара. «Искусство и смерть в средневековой Византии». (май 2010 г.)

Стиль и темы — иконки

Пакет пользовательского интерфейса Kendo для Angular предоставляет более 400 встроенных значков шрифтов для своих компонентов.

Icon — это шрифты, содержащие векторные глифы вместо букв и цифр. Вы можете стилизовать их с помощью CSS, используя все свойства стиля, которые можно применить к обычному тексту в современном браузере.

Значки шрифтов в пользовательских интерфейсах (UI) естественным образом заменяют несколько устаревшие спрайты значков.

демонстрируют значительные преимущества, такие как:

• Улучшенная масштабируемость — спрайты значков представляют собой растровые растровые изображения и плохо масштабируются. Значки шрифтов используют векторную графику, идеально смотрятся на дисплеях Retina, а масштабирование выполняется так же просто, как установка стиля размера шрифта .
• Улучшенные возможности дизайна — вы можете легко применять эффекты CSS «на лету», устанавливая цвет текста, тень или даже стили для состояний взаимодействия, например :наведите .
• Улучшенная поддержка браузеров — значки шрифтов поддерживаются всеми современными браузерами.
• Значительно меньше HTTP-запросов по сравнению с отдельными значками.
• Уменьшенный размер файла — файл размером 100 КБ содержит примерно 500 векторных значков.

Чтобы использовать значки шрифтов Kendo UI:

1. Загрузите тему пользовательского интерфейса Kendo в свой проект.

2. Добавьте пустой элемент , который будет содержать значок шрифта.

3. Назначьте класс CSS k-icon , за которым следует предопределенный класс из списка значков шрифтов, тегу HTML. Например:

   .

Несмотря на то, что шрифт веб-значков поставляется с набором предопределенных классов CSS, вам может потребоваться использовать значки с собственным именем класса CSS. Для этого установите значение псевдосодержимого :before для соответствующего значка.

 <диапазон>
<стиль>
    .my-custom-icon-class: перед {
        содержимое: "\e13a"; /* Добавляет глиф, используя номер символа Unicode */
    }

 

Если вы используете свойство styles в метаданных компонента, вам необходимо экранировать содержимое, указав двойную обратную косую черту.

 @Компонент({
  селектор: 'мое-приложение',
  стили: [`
     .k-icon.my-custom-icon-class: перед {
        содержимое: "\\e13a";
     }
    `],
  шаблон: `
    <промежуток> 
  `
})
класс AppComponent {
}
 

Вы можете изменить внешний вид каждого значка, используя:

• Различные размеры
• Цвета значков
• Иконка переворачивается и вращается

Размеры

Размер всех значков Kendo UI по умолчанию составляет 16 пикселей (размер шрифта: 16 пикселей; ширина: 16 пикселей; высота: 16 пикселей). Однако пользовательский интерфейс Kendo предоставляет следующие предопределенные размеры значков:

 
<промежуток> 
<промежуток> 
 

 <диапазон>
<стиль>
    .k-значок-24 {
        размер шрифта: 24px; /* Устанавливает размер значка на 24 пикселя */
    }

 

 <диапазон>
<стиль>
    .k-значок-24 {
        ширина: 24 пикселя;
        высота: 24 пикселя;
    }

 

 
<промежуток> 
<промежуток> 
 

 <диапазон>
 

 <диапазон>
<промежуток> 
<промежуток>