时间戳

首页 > 解决方案 > 在带有 vuejs 的 svg 文本字段中使用很棒的字体

svg - 在带有 vuejs 的 svg 文本字段中使用很棒的字体

问题描述

我正在尝试在 svg 文本字段中使用 font-awesome。这是我尝试过的：

将字体导入我的 vue 项目

import { faArrowLeftLong, faCog, faCopy, faFilter, faFilterSlash, faAngleRight, faAngleLeft, faCircleArrowDown, faCircleArrowUp, faTrash } from '@fortawesome/pro-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { library } from '@fortawesome/fontawesome-svg-core'

library.add(faFilter, faCog, faCopy, faArrowLeftLong, faFilterSlash, faPlusCircle, faAngleLeft, faAngleRight, faTrash, faCircleArrowDown, faCircleArrowUp, faInputNumeric, faKey, faCheck, faCheckDouble, faAt, faAngleUp, faUpload, faCircleDashed)

Vue.component('font-awesome-icon', FontAwesomeIcon)

然后在我的组件中我尝试了：

<div>
    <font-awesome-icon :icon="['fas', 'filter']" size="sm"/>
    <svg width="1000" height="1000">
        <text x="20" y="20" fill="gray" font-size="24px">
            <font-awesome-icon :icon="['fas', 'filter']" size="sm" />
        </text>
    </svg>
</div>

现在这似乎不起作用，文本标签中的图标不显示。svg 之外的那个是可见的。

欢迎任何想法

标签： svgvuejs2font-awesome

解决方案

推荐阅读