webpack 字体解析后注解掉< i>< /i>标记

j0pj023g 于 2023-01-21 发布在 Webpack

关注(0)|答案(3)|浏览(150)

我正在开发一个React应用程序，我希望有条件地呈现FontAwesome图标，但目前它没有在应该更改的时候更改。
我检查了元素，发现FontAwesome注解掉了React组件，并将其替换为图标的svg，所以当我返回修改React中的FontAwesome图标时，它没有任何效果。

<!-- Expected -->
<i class="fa fa-pause"></i>

<!-- Actual -->
<svg class="svg-inline--fa fa-pause fa-w-14" aria-hidden="true" focusable="false" data-prefix="fa" data-icon="pause" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg>...</svg>
<!-- <i class="fa fa-pause"></i> Font Awesome fontawesome.com -->

我知道这个问题的原因可能与我最近做的webpack更改有关（将less loader移到webpack.rules.js中而不是添加到webpack.renderer.config.js中，并将style-loader更改为MiniCssExtractPlugin.loader），但我不确定到底是什么原因导致了这个问题，也不知道如何修复它。
一个二个一个一个

webpack

来源：https://stackoverflow.com/questions/68866505/font-awesome-commenting-out-i-i-tag-after-parsing

3条答案

按热度按时间

n6lpvg4x1#

Font Awesome配置有一个用于此的属性！https://fontawesome.com/v6/docs/apis/javascript/configuration#keeporiginalsource
keepOriginalSource（默认值：true）：如果替换为内联SVG，则保留HTML注解〈----〉和原始标记。
有几种方法可以调整选项。
从浏览器API设置配置：

window.FontAwesome.config.keepOriginalSource = false;

从svg核心包设置配置：

import { config } from '@fortawesome/fontawesome-svg-core';
config.keepOriginalSource = false;

使用script标记设置配置：

<script src="https://your-site-or-cdn.com/fontawesome/v6.1.1/js/all.js" data-keep-original-source ="false"></script>

设置将与默认Font Awesome配置合并的配置对象：

FontAwesomeConfig = {
  keepOriginalSource: false
}

所有可用的Font Awesome js配置选项列表以及如何配置它们：https://fontawesome.com/v6/docs/apis/javascript/configuration

赞(0）回复(0）举报 2023-01-21

uqjltbpv2#

一旦我将导入更改为import '@fortawesome/fontawesome-free/css/all.css';并对配置进行了一些调整，这个问题就解决了。

赞(0）回复(0）举报 2023-01-21

u0sqgete3#

我在将fontawesome的SVG/JS过程与svelte结合使用时遇到了类似的问题，因为标签被fontawesome注解掉了（用<svg>替换它们），所以当渲染条件从true变为false时，svelte并没有删除它们：

{#if $connected}
    <i class="fa fa-link i18n" title="Connected"></i>
{/if}

解决方案是将<i>标记 Package 到另一个内联标记中，如<span>：

{#if $connected}
    <span>
        <i class="fa fa-link i18n" title="Connected"></i>
    </span>
{/if}

赞(0）回复(0）举报 2023-01-21

我来回答

webpack 字体解析后注解掉< i>< /i>标记

3条答案

相关问题

热门标签

最新问答