Телеграмм чат группы angular_ru страница 14032

parrot.ru

Рейтинг популярных групп и каналов

В рейтинге участвует:

групп:

каналов:

Виртуальный сервер на SSD - недорого!

Аренда выделенных и виртуальных серверов (VDS/VPS), хостинг, аренда IP-адресов, администрирование, круглосуточная поддержка

qwarta.ru подробнее

Резервное копирование с проверкой на вирусы!!!

Удобный сервис создания резервных копий на любой сервер сети интернет. Отслеживайте изменения, проверяйте на вирусы. Надежно защитите свой бизнес!

go.backupland.com

Выбираете сервер? Любая конфигурация на заказ!

Аренда физических серверов любых конфигураций под любые запросы - 1С бухгалтерия, игровые сервера, нагруженные проекты, интернет-магазины!

qwarta.ru подробнее

Size: a a a

Angular - русскоговорящее сообщество

4787 membersпожаловаться на группу

2019 December 07

АМ

Артур Мудрик in Angular - русскоговорящее сообщество

Привет. Немного абстрактный вопрос: какой способ использования/загрузки svg иконок/лого/других маленьких картиночек считается best practise?

sprite?
img src?
еще что-то?

svg-спрайты. У тебя должна быть папка с svg-картинками иконок. Каждую иконку ручками в Иллюстраторе подгоняешь под один размер, чтобы, например, viewBox="0 0 512 512" у всех был одинаковый — так удобнее потом будет. Через gulp-svg-sprite генерируешь один svg-файл — это и есть svg-спрайт. Потом в Ангуляре делаешь компонент <icon name="trash"> и в нём выводишь иконку через use по её id.

источник

16:02пожаловаться #1

АМ

Артур Мудрик in Angular - русскоговорящее сообщество

<div class="icon icon--{{size}}">
    <svg viewBox="0 0 512 512">
        <use attr.xlink:href="#icon-{{name}}"></use>
    </svg>
</div>

а, забыл, а сам спрайт icons.svg я загружаю через httpClient и вставляю в DOM через innerHTML

источник

16:02пожаловаться #2

АМ

Артур Мудрик in Angular - русскоговорящее сообщество

Алексей Охрименко

Это лучше вот тут спросить https://t.me/moscowcss_chat

Moscowcss Chat

Чатик митапа moscowcss

Правила чата: https://telegra.ph/Pravila-chata-moscowcss-03-04

По всем вопросам писать @lucyhackwrench , @evg_lullaby, @alyona_s

превью ссылок нужно всегда выключать

источник

16:02пожаловаться #3

EG

Egor Gorbachev in Angular - русскоговорящее сообщество

Алексей Охрименко

Это лучше вот тут спросить https://t.me/moscowcss_chat

Moscowcss Chat

Чатик митапа moscowcss

Правила чата: https://telegra.ph/Pravila-chata-moscowcss-03-04

По всем вопросам писать @lucyhackwrench , @evg_lullaby, @alyona_s

А чем этот чат не подходит?

источник

16:02пожаловаться #4

АМ

Артур Мудрик in Angular - русскоговорящее сообщество

А чем этот чат не подходит?

этот чат про Ангуляр, а не CSS

источник

16:03пожаловаться #5

EG

Egor Gorbachev in Angular - русскоговорящее сообщество

Артур Мудрик

этот чат про Ангуляр, а не CSS

Так в ангуляре можно по-разному с SVG работать - инлайн, img src + дополнительные пакеты, которые автоматически инлайнят svg вроде этого: https://github.com/arkon/ng-inline-svg
Вопрос вполне уместный тут.

источник

16:04пожаловаться #6

АМ

Артур Мудрик in Angular - русскоговорящее сообщество

окей, а в чем преимущество над img src с ссылкой?

преимущество в том, что <img src="..."> ты никак не можешь стилизовать через обычный CSS — нельзя покрасить в другой цвет, нельзя задать толщину линий иконки и т.д. и т.п., что легко и стандартно делается через инлайн-свг и обычный цсс

источник

16:04пожаловаться #7

AW

Alex Wells in Angular - русскоговорящее сообщество

Артур Мудрик

svg-спрайты. У тебя должна быть папка с svg-картинками иконок. Каждую иконку ручками в Иллюстраторе подгоняешь под один размер, чтобы, например, viewBox="0 0 512 512" у всех был одинаковый — так удобнее потом будет. Через gulp-svg-sprite генерируешь один svg-файл — это и есть svg-спрайт. Потом в Ангуляре делаешь компонент <icon name="trash"> и в нём выводишь иконку через use по её id.

Уже пол часа пытаюсь найти что-то адекватное, что бы поправить кривой viewbox

источник

16:05пожаловаться #8

RK

Roman Kolesnikov in Angular - русскоговорящее сообщество

Привет. Немного абстрактный вопрос: какой способ использования/загрузки svg иконок/лого/других маленьких картиночек считается best practise?

sprite?
img src?
еще что-то?

https://www.npmjs.com/package/angular-svg-icon
исходники посмотри

npm: angular-svg-icon

Angular 8 component for inlining SVGs allowing them to be easily styled with CSS.

источник

16:06пожаловаться #9

АМ

Артур Мудрик in Angular - русскоговорящее сообщество

Уже пол часа пытаюсь найти что-то адекватное, что бы поправить кривой viewbox

я руками в Иллюстраторе привожу любую иконку к одному вьюбоксу. Но можно и в компонент каждый раз передавать нужный вьюбокс. Но мне так не нравится, поэтому я ручками всё подготавливаю и у меня всегда один вьюбокс захардкожен в компоненте.

источник

16:07пожаловаться #10

AW

Alex Wells in Angular - русскоговорящее сообщество

Артур Мудрик

я руками в Иллюстраторе привожу любую иконку к одному вьюбоксу. Но можно и в компонент каждый раз передавать нужный вьюбокс. Но мне так не нравится, поэтому я ручками всё подготавливаю и у меня всегда один вьюбокс захардкожен в компоненте.

Иллюстратора нет, равно как и желания им пользоватся ради такой херни :/

источник

16:08пожаловаться #11

AW

Alex Wells in Angular - русскоговорящее сообщество

Да и 90 свгшек вручную там править...

источник

16:08пожаловаться #12

АМ

Артур Мудрик in Angular - русскоговорящее сообщество

Да и 90 свгшек вручную там править...

ок, поэтому вот так — <icon name="trash" viewBox="0 0 24 24"></icon> всегда пиши в зависимости от вьюбокса

источник

16:10пожаловаться #13

AW

Alex Wells in Angular - русскоговорящее сообщество

так все равно вьюбокс нужно подбирать для каждой свгшки

источник

16:11пожаловаться #14

АМ

Артур Мудрик in Angular - русскоговорящее сообщество

Да и 90 свгшек вручную там править...

ещё нужно https://imageoptim.com/mac установить, хорошая штука

источник

16:12пожаловаться #15

АМ

Артур Мудрик in Angular - русскоговорящее сообщество

так все равно вьюбокс нужно подбирать для каждой свгшки

не понимаю, что ты имеешь в виду — вьюбокс есть в коде svg-файла, открываешь смотришь

источник

16:13пожаловаться #16

AW

Alex Wells in Angular - русскоговорящее сообщество

Я в SVGO их загнал и так. Будет профит от этой штуки?

источник

16:13пожаловаться #17

АМ

Артур Мудрик in Angular - русскоговорящее сообщество

определённо

источник

16:13пожаловаться #18

AW

Alex Wells in Angular - русскоговорящее сообщество

Артур Мудрик

не понимаю, что ты имеешь в виду — вьюбокс есть в коде svg-файла, открываешь смотришь

источник

16:13пожаловаться #19

AW

Alex Wells in Angular - русскоговорящее сообщество

Имею в виду, что в свгшке этот самый вьюбокс - кривой

источник

16:14пожаловаться #20