【发布时间】:2020-03-19 23:26:13
【问题描述】:
我正在尝试使用 method 创建我们在我们的一个网站上使用的 Font Awesome 图标的子集,并让它工作。
虽然捆绑包的大小减小了,但 Font Awesome 脚本似乎正在减慢网站的速度。我认为这是由于 dom.watch() 函数观察页面的变化。不会发生任何变化,并且会有很多 DOM 节点,所以真的,我只想在页面加载后设置图标。
https://fontawesome.com/how-to-use/with-the-api/methods/dom-watch
https://fontawesome.com/how-to-use/with-the-api/methods/dom-i2svg
从文档中我假设我可以调用 dom.i2svg() 但这会导致浏览器中出现错误:“dom.i2svg() 未定义”。
当我使用 dom.watch() 时,图标显示,当我使用 console.log(dom) 时,它显示 i2svg() 和 watch() 函数在对象中,所以我不明白为什么 i2svg( ) 未定义。
我正在使用 rollup.js 创建捆绑包,并且还使用了 parcel-bundler 并获得了相同的结果。
这是我捆绑的 main.js 文件。
import { dom, library, config } from '@fortawesome/fontawesome-svg-core'
import {
faCamera,
faStar,
faStarHalf,
faSearch,
faExternalLinkAlt,
faAngleRight,
faAngleDown,
faPlay,
faPhone,
faExternalLinkSquareAlt,
faAngleUp,
faCommentAlt
} from '@fortawesome/free-solid-svg-icons'
import {
faTwitter,
faYoutube,
faInstagram,
faLinkedinIn,
faFacebookF
} from '@fortawesome/free-brands-svg-icons'
import { faChevronCircleDown as falChevronCircleDown,
faEnvelopeOpenText as falEnvelopeOpenText,
faMapMarkerAlt as falMapMarkerAlt,
faPhone as falPhone,
faCommentAltLines as falCommentAltLines,
faExternalLink as falExternalLink,
faExternalLinkAlt as falExternalLinkAlt,
faExternalLinkSquare as falExternalLinkSquare,
faExternalLinkSquareAlt as falExternalLinkSquareAlt,
faHomeAlt as falHomeAlt,
faCalendarCheck as falCalendarCheck,
faFileDownload as falFileDownload,
faFolderOpen as falFolderOpen
} from '@fortawesome/pro-light-svg-icons'
import { faCommentAltLines as farCommentAltLines } from '@fortawesome/pro-regular-svg-icons';
library.add(faPhone,
faCamera,
faStar,
faStarHalf,
faSearch,
faAngleRight,
faAngleDown,
faPlay,
faExternalLinkAlt,
faExternalLinkSquareAlt,
faAngleUp,
faTwitter,
faYoutube,
faInstagram,
faFacebookF,
faLinkedinIn,
falChevronCircleDown,
falEnvelopeOpenText,
falMapMarkerAlt,
falPhone,
falExternalLinkSquareAlt,
falExternalLinkSquare,
falExternalLinkAlt,
falExternalLink,
farCommentAltLines,
falCommentAltLines,
falHomeAlt,
falCalendarCheck,
falFileDownload,
falFolderOpen
);
// dom.watch();
dom.i2svg()
如果我使用 dom.watch,<i class="fas fa-camera"></i> 会按预期替换为 SVG,但如果我调用 dom.i2svg,我会收到函数未定义的错误。
这几天我一直在努力解决这个问题,并且也向 FA 寻求帮助,但没有成功。任何帮助将不胜感激。基本上我想使用 dom.i2svg() 因为我猜它会阻止页面变慢。 谢谢。
【问题讨论】:
标签: javascript node.js rollupjs font-awesome-5 parceljs