小编The*_*Man的帖子

我正在使用vuetify 1.1.8和vue 3.0.0-rc.3。我正在尝试使用我设计的项目中的一些自定义SVG图标，而不是vuetify支持的Material Icons或FontAwesome Icons中的默认图标

我尝试使用vue-svg-loader加载我的自定义svg图标，并将它们用作组件。像这样

<template>
    <icon-one></icon-one>
</template>

<script>
    import iconOne from './public/iconOne.svg'
    export default{
        components:{
                 iconOne
          }
    }
</script>

但是问题vue-svg-loader在于我无法在拥有自由<v-text-field>的append-icon和其他许多地方使用它们<v-icon>。

我还阅读了他们提到的有关使用自定义图标的vuetify文档，但我认为这也没有帮助。

有人可以帮我这个忙。也许我应该尝试由材质角度支持的精灵图像

TL; DR

我有自定义的自制SVG图标，我想像<v-icon>customIcon</v-icon>在vuetify中一样使用它们

通常为了获取 SVG 中任何元素的边界框，我们使用 getBoundingClientRect() 或 getBBox() 分别给出顶部、底部、左、右、宽度、高度或 x、y、宽度、高度。但是，当文本旋转时，这些值不足以获得元素的紧密边界框，因为由这些值形成的框将具有水平和垂直边缘，而不是与文本平行。如何为旋转文本选择紧密边界框，如下图所示。（Chrome Inspect Element Selector 突出显示了该文本。）