有关svg组件封装的三个疑问
来源：3-11 使用 svg-sprite-loader 处理 svg 图标
knockkey
2022-03-23
老师您好:
问题一:
在vue.config,js文件中, 这个config.module.rule('xxx')中的xxx是怎么知道值是什么的呢?
问题二:
既然ebpack对.svg结尾的文件没有默认的loader, 那我为什么要忽略呢?直接配置这个svg-sprite-loader不就好了吗?
问题三:
据我了解: 这个在index.vue文件中的#icon是和vue.config.js中.options中的symbolId相关, symbol的id如果不特别指定，就是我的文件名。随后我做出这样的操作: 删除.options中的symbolId配置同时修改index.vue文件中iconName的函数, 目的是想试试不要前缀直接能不能用,但是图标就看不到了
老师在视频中对这里的解释是: 像element-ui也会添加一个el作为前缀.
那我为什么不设置前缀就不生效呢? 我也没看懂svg-sprite-loader的npm官网在说什么.
期待老师的解答, 谢谢老师!!!
1回答
-
Sunday
2022-03-23
你好
问题一: config.module.rule 对应的是 webpack 的 rule 规则，这个rule 规则其实是对应的 loader ，这个如果不知道是哪个loader 的话，可以看一下 webpack 的 loader 列表的。
问题二：可能我之前的回答造成了一些歧义。
这个表示 svg 的处理忽略掉 icons 文件夹下的内容。
这个代码只是表示通过 svg-sprite-loader 处理 svg。
问题三：symbolId 其实意思表示一个《唯一的id，因为 symbol 是不重复的》，没有想象的那么复杂。
你这段话的意思是说你把 symbolId 删除了？
那你删除之后你的使用应该是这样才对呀，就没有必要添加 icon- 了
012022-03-23
相似问题