Есть ли способ контролировать ширину обводки 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, но, к сожалению, они не влияют на элемент.

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

3 метода стилизации элементов HTML
3 метода стилизации элементов HTML
Когда дело доходит до применения какого-либо стиля к нашему HTML, существует три подхода: встроенный, внутренний и внешний. Предпочтительным обычно...
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Flatpickr: простой модуль календаря для вашего приложения на React
Flatpickr: простой модуль календаря для вашего приложения на React
Если вы ищете пакет для быстрой интеграции календаря с выбором даты в ваше приложения, то библиотека Flatpickr отлично справится с этой задачей....
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Клиент для URL-адресов, cURL, позволяет взаимодействовать с множеством различных серверов по множеству различных протоколов с синтаксисом URL.
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

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