Question

我正在使用svg-inline-loader来内联我完美运行的SVG。

但是，我还需要在其他位置使用这些SVG而不是内联，因此我无法使用svg-inline-loader。我需要使用file-loader来导入我的SVG。

似乎很容易内联我的SVG，有多个组件可以做到这一点。但是，我还需要根据所需图标的名称动态执行此操作。

这使得它变得尴尬，因为我找不到动态导入文件并在页面上内联它的方法。

使用 import() 不起作用。 require() 也不会。

<template>
    <span class="s-icon" v-bind:class="[typeAndSize, optionClasses]" v-html="icon"></span>
</template>

computed: {
    icon () {
        return () => import(`../../../../node_modules/my-lib/images/svg-icons/${this.name}.svg`);
    },

之前有没有人解决过这个问题？或者任何人都可以指出我正确的方向。

修改

继我对已接受答案的评论之后，这是我最终得到的完整解决方案：

const icon = require(`!!svg-inline-loader!../../../../node_modules/my-lib/images/svg-icons/${this.name}.svg`);

Answer 1

您可以使用内联查询字符串格式，以便仅应用特定的加载器并忽略其余的。

# -*- coding: utf-8 -*-    
# Created by: PyQt5 UI code generator 5.10
#
# WARNING! All changes made in this file will be lost!

from PyQt5 import QtCore, QtGui, QtWidgets

class Ui_MainWindow(object):
    def setupUi(self, MainWindow):
        MainWindow.setObjectName("MainWindow")
        MainWindow.resize(514, 381)
        self.centralwidget = QtWidgets.QWidget(MainWindow)
        self.centralwidget.setObjectName("centralwidget")
        self.text_output = QtWidgets.QTextEdit(self.centralwidget)
        self.text_output.setGeometry(QtCore.QRect(80, 10, 351, 271))
        self.text_output.setObjectName("text_output")
        self.btn_Action = QtWidgets.QPushButton(self.centralwidget)
        self.btn_Action.setGeometry(QtCore.QRect(220, 300, 75, 23))
        self.btn_Action.setObjectName("btn_Action")
        MainWindow.setCentralWidget(self.centralwidget)
        self.menubar = QtWidgets.QMenuBar(MainWindow)
        self.menubar.setGeometry(QtCore.QRect(0, 0, 514, 21))
        self.menubar.setObjectName("menubar")
        self.menuFile = QtWidgets.QMenu(self.menubar)
        self.menuFile.setObjectName("menuFile")
        MainWindow.setMenuBar(self.menubar)
        self.statusbar = QtWidgets.QStatusBar(MainWindow)
        self.statusbar.setObjectName("statusbar")
        MainWindow.setStatusBar(self.statusbar)
        self.actionOpen_File = QtWidgets.QAction(MainWindow)
        self.actionOpen_File.setObjectName("actionOpen_File")
        self.actionOpen_File.setShortcut('Ctrl+O')
        self.actionOpen_File.triggered.connect(self.file_open)
        self.menuFile.addAction(self.actionOpen_File)
        self.menubar.addAction(self.menuFile.menuAction())

        self.retranslateUi(MainWindow)
        QtCore.QMetaObject.connectSlotsByName(MainWindow)

    def retranslateUi(self, MainWindow):
        _translate = QtCore.QCoreApplication.translate

        MainWindow.setWindowTitle(_translate("MainWindow", "MainWindow"))
        self.btn_Action.setText(_translate("MainWindow", "Action"))
        self.menuFile.setTitle(_translate("MainWindow", "File"))
        self.actionOpen_File.setText(_translate("MainWindow", "Open File"))


    def file_open(self):
        name, _ = QtWidgets.QFileDialog.getOpenFileName(None, 'Open File', options=QtWidgets.QFileDialog.DontUseNativeDialog)
        file = open(name, 'r')
        with file:
            text = file.read()
            self.text_output.setText(text)

    def suffix_remove(self): 
        suffix_list = []
        dictionary = {}
        lists = ['athletic','kitchenette','helpful','terrify']
        f = self.text_output.toPlainText()

        for lines in f:
                lines = lines.rstrip()
                suffix_list.append(lines)
        for words in lists:
            for suffix in suffix_list:
                if words.endswith(suffix):
                    final_list = str.replace(words,suffix,'')
                    dictionary[words] = final_list
        return dictionary           



if __name__ == "__main__":
    import sys
    app = QtWidgets.QApplication(sys.argv)
    MainWindow = QtWidgets.QMainWindow()
    ui = Ui_MainWindow()
    ui.setupUi(MainWindow)
    ui.btn_Action.clicked.connect(lambda: ui.text_output.append(str(ui.suffix_remove())))
    MainWindow.show()
    sys.exit(app.exec_())

对于动态导入，您可以查看require-context

如何动态内联通过文件加载器加载的SVG？

1 个答案: