Я импортирую значки таблиц в 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
, но, к сожалению, они не влияют на элемент.
Заранее благодарю за любую помощь.
font-weight
Взгляните на этот кодовая ручка.
Svg
s, вы можете поиграть со значениями viewBox = "0 0 24 24"
и изменить их значение! (Что не рекомендуется)Я также заметил, что это происходит в более новых версиях Vuetify! но все равно проверь :)
Настройка Vue 3, Vuetify 4 для иконок полностью отличается, поэтому мне придется копнуть глубже, как только мы перейдем на новый фреймворк. :D
Спасибо за ответ. В настоящее время я имею дело с svg, но, тем не менее, полезно.