Есть ли способ контролировать ширину обводки svgs при использовании Vuetify и импорте значков с помощью CDN?

Я импортирую значки таблиц в cdn в свою общедоступную папку html:

<link rel = "stylesheet" href = "https://unpkg.com/@tabler/icons@latest/iconfont/tabler-icons.min.css">

и согласно документам Vuetify, вносящим библиотеку значков (в plugins/vuetify.js):

export default new Vuetify({
    icons: {
        iconfont: "ti",
    }

Это позволяет мне использовать <v-icon>ti-pencil<v-icon> (в качестве примера) в компонентах Vue2. Все это работает просто отлично. Однако, когда значки находятся внутри <v-navigation-drawer>, они больше, а линии слишком толстые. Я видел только свойство size, которое работает, но оно также уменьшает значок, а это не то, что мне нужно.

Есть ли способ изменить ширину штриха на SVGS с помощью CSS? Или есть другой способ повлиять на толщину этих путей после импорта? Также возможны корректировки font-weight, но, к сожалению, они не влияют на элемент.

Заранее благодарю за любую помощь.

Создание фильтров для вашего сайта
Создание фильтров для вашего сайта
Фильтры - удобный инструмент в арсенале веб-дизайнера. Они позволяют изменять элементы на странице с помощью всего нескольких строк кода. Эти...
Анимация SVG-узоров без единой строки CSS
Анимация SVG-узоров без единой строки CSS
Недавно я работал над веб-проектом, который позволил мне поэкспериментировать с шаблонами SVG. С SVG очень приятно работать, как только вы получите...
Как использовать d3.js для рисования 2D SVG-элементов в приложении Angular?
Как использовать d3.js для рисования 2D SVG-элементов в приложении Angular?
D3.js - это обширная библиотека, используемая для привязки произвольных данных к объектной модели документа (DOM). Мы разберем основные варианты...
0
0
25
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий
  • Вам нужно нацелить значок с помощью селекторов Css и настроить font-weight

Взгляните на этот кодовая ручка.

  • Если вы имеете дело с Svgs, вы можете поиграть со значениями viewBox = "0 0 24 24" и изменить их значение! (Что не рекомендуется)

Спасибо за ответ. В настоящее время я имею дело с svg, но, тем не менее, полезно.

JP Banas 29.04.2022 20:38

Я также заметил, что это происходит в более новых версиях Vuetify! но все равно проверь :)

Pouya M 29.04.2022 20:53

Настройка Vue 3, Vuetify 4 для иконок полностью отличается, поэтому мне придется копнуть глубже, как только мы перейдем на новый фреймворк. :D

JP Banas 09.05.2022 15:23

Другие вопросы по теме