Как извлечь иконки из темы браузера

jugami

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

Простой путь подходит для тем, скачанных из официального магазина тем Vivaldi.

Что нужно сделать:

Перейти на страницу с темой в официальном магазине тем Vivaldi
Навести курсор на кнопку скачивания темы, нажать по ней правой кнопкой мыши, вызвав контекстное меню, и выбрать в нём пункт "сохранить ссылку как..."
После этого откроется диалоговое окно, которое предложит сохранить на ваш компьютер .zip архив с темой. Внутри него и находятся иконки из темы, а ещё там можно найти фоновое изображение темы и файл settings.json с конфигурацией темы.

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

Что нужно сделать:

Перейти на страницу со средствами разработчика по ссылке vivaldi://inspect/#apps и нажать на "inspect" рядом с разделом Vivaldi, под которым находятся запущенные в текущем окне браузера вкладки. Ссылка этого раздела должна заканчиваться на browser.html
Далее у вас появится окно со средствами разработчика как на рисунке ниже. В нём нужно активировать режим выбора элементов на странице, нажав на иконку с курсором в верхней левой части окна.
После того, как вы активируете режим выбора элементов, все элементы интерфейса браузера при наведении на них будут подсвечиваться, а рядом с ними будет отображаться информация об элементе.

Нажав на элемент, в окне со средствами разработчика будет выделен участок HTML-кода, где располагается этот элемент, а справа от него - CSS-код для этого элемента.
Выделив нужную иконку, следует опуститься в дереве элементов до элемента с тегом <svg> для векторной иконки или <img> для растровой иконки, то есть для изображения.

4.1. Если ваша иконка - это просто изображение, то нужно лишь навести на ссылку внутри тега <img>, скопировать её в буфер обмена, вставить эту ссылку в адресную строку, перейти по ней и сохранить иконку как обычное изображение.

4.2. Если же у вас векторная иконка в теге <svg>, то нужно нажать правой кнопкой мыши по выделенной строке (строка должна начинаться с <svg), перейти в контекстном меню в раздел "копировать" и выбрать пункт "копировать элемент".

После этого, весь код, относящийся к иконке, будет скопирован в буфер обмена. Далее можно воспользоваться онлайн-сервисом SVG Viewer для того, чтобы просмотреть иконку, по необходимости внести какие-либо изменения в код и скачать её в формате .svg

Таким образом можно извлечь иконки из темы браузера.

P.S. В качестве бонуса прикрепляю ссылку на архив с классическими иконками, извлечёнными из версии 5.7 и адаптированными под новую версию 6.0. Кроме оригинальных иконок, там есть пару моих иконок, стилизованных под классические

kurai

А сложным способом можно извлечь иконки из других браузеров? Или в Vivaldi он работает из-за особенности реализации интерфейса?

jugami

@kurai, похожим способом можно извлечь иконки из Firefox. Отличаться будет только способ вызова средств разработчика.

kurai

А нашим ~~постоянным зрителям~~ пользователям напоминаю, что до 8 мая текущего года вы можете принять участие в конкурсе и выиграть интересный приз

sphera

Зачем извлекать иконки ?
Зачем прикреплять тему ?
Вы предлагаете людям SVG в блокноте редактировать. Для этого надо уже быть серьезным программистом. Максимум, сто вы там сделаете — обрежете ее края.
Дайте людям нормальные редакторы: INKSCAPE , и много более простых online-редакторов без кода.