Vue-element-admin: icon-svg 标签的问题

Created on 24 Sep 2017  ·  9Comments  ·  Source: PanJiaChen/vue-element-admin

hi,我按照你的项目自己抽离了需要的部分重写了一下，但是icon-svg的标签可以识别却不能正常的加载图片。我前段渲染成的效果是这样的

 <svg aria-hidden="true" class="svg-icon">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-yonghuming">
    #shadow-root(closed)
    </use>
</svg>

icon的index.js也生成了inconmap，不知道为什么没有加载出来

picture donng
👍2

Most helpful comment

`//const req = require.context('./svg', false, /.svg$/);

const req = require.context('!svg-sprite-loader?{"symbolId":"icon-[name]"}!./svg', false, /.svg$/)`
看到另一个问题中的回答，我直接修改了icons/index.js，没想到就好了

picture JerryGreenLuan on 4 May 2018
👍7

All 9 comments

请问在webpack.base.conf.js中url-loader和svg-sprite-loader有正确配置吗？
在components/icons/svg/index.js有require.context()吗？

leij1ang picture leij1ang on 25 Sep 2017

@leij1ang 应该是webpack的问题，我后端用了laravel自带的配置，所以没有使用你的webpack配置。

module: {
            rules: [
                {
                    test: /\.svg$/,
                    loader: 'svg-sprite-loader',
                    include: [path.resolve(__dirname,'./resources/assets/js/icons')],
                    options: {
                        symbolId: 'icon-[name]'
                    }
                },
                {
                    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                    loader: 'url-loader',
                    exclude: [path.resolve(__dirname,'./resources/assets/js/icons')],
                    options: {
                        limit: 10000,
                        name: ('images/[name].[hash:7].[ext]')
                    }
                }
            ]
        }

我添加了这两个规则，但是报错:

warning  in ./resources/assets/js/icons/svg/zonghe.svg

svg-sprite-loader exception. 2 rules applies to D:\work\data-analysis-platform\resources\assets\js\icons\svg\zonghe.svg

 @ ./resources/assets/js/icons/svg nonrecursive \.svg$
 @ ./resources/assets/js/icons/index.js
 @ ./resources/assets/js/app.js
 @ multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss

我在./resources/assets/js/icons放的文件，编译后在 public/fonts下面有生成了新的图片包括svg，感觉是路径或引入的问题，但是我对webpack的配置不是很熟悉。

下面是requireAll输出的结果：

:
"/fonts/404.svg?ba00b8106183e7b9b1af5fd526070563"
1
:
"/fonts/EXCEL.svg?52faddc8a6954695c64c73ed06643744"
2
:
"/fonts/QQ.svg?762ef26a079008907049a7f63a6ed4ad"
3
:
"/fonts/a.svg?a072b0cd2847e511e3ef57adddd73789"
4
:
"/fonts/b.svg?fedb42c8c74a0cccbd799cb90b273703"
5
:
"/fonts/bug.svg?c769d87ac1c9e8718a8008fee660190e"
donng picture donng on 25 Sep 2017

太久没后续 先关闭

PanJiaChen picture PanJiaChen on 1 Dec 2017

我现在也遇到这个问题了，不知道是不是laravel自带的webpack.mix.js的问题。我看了一下icons/index.js中的iconMap，我的都是
0: "/images/404.svg?683aef6d588f427279e3e97bc63f3bd8"
​
1: "/images/bug.svg?c74b0b9f2819bd45afe964e7f03f72b1"
​
2: "/images/chart.svg?00215b442fff3eea7ecdb1dc37b27326"
​
3: "/images/clipboard.svg?afeabab9d359074dfb2e4b3ccecdaa5e"
​
4: "/images/component.svg?9d89f4d81c717fee32fd5889baf21e2b"
​
5: "/images/dashboard.svg?eb21a696247e8daf1c20a2f68c714913"
​
6: "/images/documentation.svg?50aeba85b4b692e29f29e62ab6c073c8"
​
7: "/images/drag.svg?d79cf3e05135d3e5a53e325bb19d95f6"
​
8: "/images/email.svg?8990cbc67f501f37fc374339ba463fbb"
​
9: "/images/example.svg?72852e4b67349e7179ba1c2a4fb519b1"
​
10: "/images/excel.svg?0e0e914df023042a4957762aecbe6677"
​
11: "/images/eye.svg?a977c78883c376522a325821b6f43252"
​
12: "/images/form.svg?8ba0c582946536f5b22c921b67c2e555"
​
13: "/images/icon.svg?074f1259b150c21e0594b7a5909f039d"
​
14: "/images/international.svg?b878dfb3ca8e73831bd27b99924ae25f"
​
15: "/images/language.svg?cbbb682b1f7bf56d29824b5b685ab9b2"
​
16: "/images/lock.svg?794f1af16eb3cb62b6c8ae2531bb13d8"
​
17: "/images/message.svg?7e9b1314f74fa68760a6650166d50c28"
​
18: "/images/money.svg?bc3f3b159b65ca42688252ef6fc8b8d1"
​
19: "/images/password.svg?619b0ec97607fad9498378fc31caa5b1"
​
20: "/images/people.svg?b79eeb04187ecf607562c2c273832914"
​
21: "/images/peoples.svg?d9dfce72e4919a48cca0cecf2816400d"
​
22: "/images/qq.svg?c8ac28c368ffae7bacea69f8789a4a06"
​
23: "/images/shoppingCard.svg?ae60058940b790eb4c8dba6a936e52c3"
​
24: "/images/star.svg?2540aa8014a63c4fafa065c1cd0b6c05"
​
25: "/images/tab.svg?b0340256e08f61a9b2e9fd671f936bc9"
​
26: "/images/table.svg?2a4ac98dc809ad490c1915800814eb03"
​
27: "/images/theme.svg?e89638029e4dc5833b2c188f65b5f173"
​
28: "/images/user.svg?7c34a3277843c42b0f521da1ae18dda2"
​
29: "/images/wechat.svg?65024b23d2e9d30a6102daab01726aed"
​
30: "/images/zip.svg?80022cfb82b7afc4bcc77b5db3dc0632"` 而作者的却是 Array(31)
0
:
{default: BrowserSpriteSymbol, __esModule: true}
1
:
{default: BrowserSpriteSymbol, __esModule: true}
2
:
{default: BrowserSpriteSymbol, __esModule: true}
3
:
{default: BrowserSpriteSymbol, __esModule: true}
4
:
{default: BrowserSpriteSymbol, __esModule: true}
5
:
{default: BrowserSpriteSymbol, __esModule: true}
6
:
{default: BrowserSpriteSymbol, __esModule: true}
7
:
{default: BrowserSpriteSymbol, __esModule: true}
8
:
{default: BrowserSpriteSymbol, __esModule: true}
9
:
{default: BrowserSpriteSymbol, __esModule: true}
10
:
{default: BrowserSpriteSymbol, __esModule: true}
11
:
{default: BrowserSpriteSymbol, __esModule: true}
12
:
{default: BrowserSpriteSymbol, __esModule: true}
13
:
{default: BrowserSpriteSymbol, __esModule: true}
14
:
{default: BrowserSpriteSymbol, __esModule: true}
15
:
{default: BrowserSpriteSymbol, __esModule: true}
16
:
{default: BrowserSpriteSymbol, __esModule: true}
17
:
{default: BrowserSpriteSymbol, __esModule: true}
18
:
{default: BrowserSpriteSymbol, __esModule: true}
19
:
{default: BrowserSpriteSymbol, __esModule: true}
20
:
{default: BrowserSpriteSymbol, __esModule: true}
21
:
{default: BrowserSpriteSymbol, __esModule: true}
22
:
{default: BrowserSpriteSymbol, __esModule: true}
23
:
{default: BrowserSpriteSymbol, __esModule: true}
24
:
{default: BrowserSpriteSymbol, __esModule: true}
25
:
{default: BrowserSpriteSymbol, __esModule: true}
26
:
{default: BrowserSpriteSymbol, __esModule: true}
27
:
{default: BrowserSpriteSymbol, __esModule: true}
28
:
{default: BrowserSpriteSymbol, __esModule: true}
29
:
{default: BrowserSpriteSymbol, __esModule: true}
30
:
{default: BrowserSpriteSymbol, __esModule: true}`
可能就是这的问题，但是webpack.mix.js配置都没有问题，搞了一下午也没有搞出来，心累~

JerryGreenLuan picture JerryGreenLuan on 2 May 2018
  • Laravel Mix Version: 1.5.1
  • Node Version : 6.14.2
  • NPM Version : 5.6.0

出现此问题的原因为：

laravel-mix 在 1.5 版本下默认将 svg 作为字体处理，且其默认配置的优先级高于 webpack.mix.js， 相关 issue 查看。

以下为解决办法：

  1. 修改源文件（不推荐）：
    node_modules/laravel-mix/src/builder/webpack-rules.js 中搜索 svg，并删除 svg 关键词。
  2. 提取 laravel-mix 的配置并修改（推荐）：

在项目下新建 webpack.config.js,文件内容如下：

const config = require('laravel-mix/setup/webpack.config');

// Exclude SVG from laravel-mix webpack config, we will handle them with vue-svg-loader
// See also: https://github.com/JeffreyWay/laravel-mix/issues/350
for (const rule of config.module.rules) {
  if (rule.test.toString() == '/\\.(woff2?|ttf|eot|svg|otf)$/') {
    rule.test = /\.(woff2?|ttf|eot|otf)$/;
  }
}

module.exports = config;

webpack.mix.js 的规则配置如下：

            rules: [
                {
                    test: /\.svg$/,
                    loader: 'svg-sprite-loader',
                    include: [path.resolve(__dirname,'resources/assets/js/icons')],
                    options: {
                        symbolId: 'icon-[name]'
                    }
                },
                {
                    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                    loader: 'url-loader',
                    exclude: [path.resolve(__dirname, 'resources/assets/js/icons/svg')],
                    options: {
                        limit: 10000,
                        name: ('images/[name].[hash:7].[ext]')
                    }
                }
            ]

最后修改package.json 的配置文件引入位置：

    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=webpack.config.js"
    },

此方案已通过本地测试 @JerryGreenLuan ， 测试 laravel-mix 的最新 2.1 版本，出现大量错误遂放弃新版本的应用。

donng picture donng on 3 May 2018

@Donng 昨天我看了laravel文档，自定义了webpack.config.js配置文件。可惜自定义之后，直接报错了。我用的laravel mix是2.0，估计也没什么好的解决方案了。也多谢您的帮助！

JerryGreenLuan picture JerryGreenLuan on 4 May 2018

`//const req = require.context('./svg', false, /.svg$/);

const req = require.context('!svg-sprite-loader?{"symbolId":"icon-[name]"}!./svg', false, /.svg$/)`
看到另一个问题中的回答，我直接修改了icons/index.js，没想到就好了

JerryGreenLuan picture JerryGreenLuan on 4 May 2018
👍7

@JerryGreenLuan 的方法可以。在说一下这个文件是 icons/index.js

zhuzhichao picture zhuzhichao on 11 May 2018

我也遇到了，是单词写错了，把 symbolId 写成了 symbolld，你可以检查下拼写

                {
                    test: /\.svg$/,
                    loader: 'svg-sprite-loader',
                    include: [path.resolve(__dirname,'./resources/assets/js/icons')],
                    options: {
                        symbolId: 'icon-[name]'
                    }
                },
XinChou16 picture XinChou16 on 28 Oct 2019
Was this page helpful?
0 / 5 - 0 ratings

Related issues

Sihan-Tan picture Sihan-Tan  ·  4Comments
343512292 picture 343512292  ·  3Comments
wzhz picture wzhz  ·  3Comments
sunchenguang picture sunchenguang  ·  4Comments
gateslu picture gateslu  ·  4Comments