Vue配置svg-sprite-loader以使用svg图标 #2

fantasticit · 2018-01-01T02:39:01Z

`svg-sprite-loader`在vue中的使用

何为`svg sprite`

类似于CSS中的雪碧图。将svg整合在一起，呈现的时候根据symbolId来显示特定的图标。

`svg sprite`与`symbol`元素

可以这样简单理解，symbol是一个个svg图标，而svg sprite则是symbol的集合，我们可以通过use来指定使用哪一个svg。

在`vue`中使用

安装svg-sprite-loader
执行npm install --save-dev svg-sprite-loader
修改webpack.base.conf.js
在rules下添加并修改以下配置：

{
  test: /\.svg$/,
  loader: 'svg-sprite-loader',
  include: [resolve('src/icons')],
  options: {
    symbolId: '[name]'
  }
},
{
  test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
  loader: 'url-loader',
  exclude: [resolve('src/icons')],
  options: {
    limit: 10000,
    name: utils.assetsPath('img/[name].[hash:7].[ext]')
  }
}

配置说明:

svg-sprite-loader：
这里用include: [resolve('src/icons')]来假设项目中所用到svg图标文件在src/icons文件目录下，svg-sprite-loader将只处理这里的文件
url-loader:
这里用xclude: [resolve('src/icons')]来告诉url-loader不要处理src/icons下的图片文件（因为这里已经交给svg-sprite-loader了）

添加icon组件
在src/components文件夹下新建文件夹icon，并新建index.vue文件，写入内容如下：

<template>
  <svg :width="width" :height="height">
    <use :xlink:href="iconName"/>
  </svg>
</template>

<script>
export default {
  name: 'Icon',

  props: {
    type: {
      default: 'sad'
    },

    width: {
      default: 50
    },

    height: {
      default: 50
    }
  },

  computed: {
    iconName() {
      return '#' + this.$props.type
    }
  }
}
</script>

<style scoped>
svg {
  fill: currentColor;
  overflow: hidden;
}
</style>

新建src/icons文件夹
假如所有的svg文件都放在src/icons/svg文件夹下，那么新建src/icons/index.js文件，写入：

import Vue from 'vue';
import Icon from '@/components/icon';

Vue.component('icon', Icon);

// 导入所有的svg（参照webpack文档: http://webpack.github.io/docs/context.html#dynamic-requires ）
~function (requireContext) {
  return requireContext.keys().map(requireContext)
}(require.context('./svg', false, /\.svg$/))

至此，如有不理解，可参照我的src目录结构示意：

├── App.vue
├── assets
│   └── logo.png
├── components
│   └── icon
│       └── index.vue
├── icons
│   ├── index.js
│   └── svg
│       ├── more.svg
│       ├── navicon.svg
│       ├── pause.svg
│       ├── play.svg
│       ├── sad.svg
│       └── wifi.svg
└── main.js

在main.js引入src/icons/index.js

import Vue from 'vue'
import App from './App'

import './icons/index'

Vue.config.productionTip = false

new Vue({
  el: '#app',
  template: '<App/>',
  components: { App }
})

如何使用
以我的App.vue文件举个例子：

<template>
  <div id="app">
    <icon type="play"></icon>
    <icon type="sad"></icon>
    <icon type="more"></icon>
    <icon type="pause"></icon>
    <icon type="wifi"></icon>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

The text was updated successfully, but these errors were encountered:

porrashuang · 2018-07-09T12:26:00Z

手把手教學寫的非常好！！！！新手入門配置好久終於找到能用的了
只是不知道是不是我之前遺留的問題須將iconName() { return '#' + this.$props.type }改成iconName() { return '#icon-' + this.$props.type }

fantasticit · 2018-07-09T13:53:44Z

@kururu002 本文基本写明了每一步步骤，命名什么的可能要看怎么使用的。如果您喜欢这篇文章，欢迎给这个仓库star，权当鼓励。（哈哈）

YuyingZheng · 2018-11-06T03:11:03Z

以下是我用svg-sprite-loader 插件生成的图片，怎么把<title>avatar</title>删掉呢？有相关配置选项么？

<title>avatar</title>

fantasticit · 2018-11-06T03:40:51Z

@yuying-kooboo 没能理解你说的意思，可以看下原文件和生成的文件的内容？

YuyingZheng · 2018-11-06T04:04:27Z

这是我的原文件：

<title>avatar</title>

我希望用这个插件生成后，<title>avatar</title>不要渲染到页面上，如何把这个title去掉呢

fantasticit · 2018-11-06T04:44:40Z

@yuying-kooboo 可以看下 svg 源文件的内容吗？这个应该是你的 svg 源文件内容里就有的 title ，你可以修改源文件试下。

fantasticit · 2018-11-06T04:45:49Z

@yuying-kooboo 用编辑器打开你的 svg 源文件，svg文件是可以修改的，结构类似 HTML

YuyingZheng · 2018-11-06T06:13:02Z

Hi, svg源文件是可以修改的，谢谢你了~

fantasticit · 2018-11-06T06:16:47Z

@yuying-kooboo :)

qianlanse · 2019-03-26T06:32:29Z

请问nuxt中怎么配置的，我按照你的写法好像不行

fantasticit · 2019-03-26T08:42:29Z

@qianlanse

JetBrains/svg-sprite-loader#233
JetBrains/svg-sprite-loader#185

点击查看上面的 issue 看能不能解决。:)

brantcao · 2019-05-22T02:53:42Z

为什么我的不生效呢

brantcao · 2019-05-22T02:55:15Z

完全按照步骤来的，就是不生效，没高度

fantasticit · 2019-05-22T03:30:13Z

@brantcao 你可以发一份你的代码（简化后的）给我，我看一下，因为这样在 git issues 里聊的话太费劲了。邮箱：[email protected]

brantcao · 2019-05-22T03:50:17Z

你好，可以的，我本来都是demo。太感谢你了。 firstVue.zip <https://drive.google.com/file/d/1LaDce5ttOqPQB-V23dIGFfU-qS6K_Pae/view?usp=drive_web> 夜行 <[email protected]> 于2019年5月22日周三上午11:30写道：

…

@brantcao <https://github.com/brantcao> 你可以发一份你的代码（简化后的）给我们，我看一下，因为这样在 git issues ***@***.*** — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#2>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AGQBX53QHIK4CTEB7KEDJ7TPWS44PANCNFSM4EJ75A2A> .

fantasticit · 2019-05-22T06:58:22Z

@brantcao 你的 webpack.base.conf.js 配置有问题，url-loader 的配置覆盖了 svg-sprite-loader 的配置，注释掉上面这个 url-loader 中的 svg 就可以了。

brantcao · 2019-05-22T07:12:26Z

你好，太感谢你了，我研究这个问题，两天了，因为我自己没注意细节，一直没有解决这个问题。真的非常感谢你。请问以后假如有其他问题，可以通过什么方式给你留言呢？再次表示感谢。夜行 <[email protected]> 于2019年5月22日周三下午2:58写道：

…

@brantcao <https://github.com/brantcao> 你的 webpack.base.conf.js 配置有问题， url-loader 的配置覆盖了 svg-sprite-loader 的配置，注释掉上面这个 url-loader 中的 svg 就可以了。 [image: image] <https://user-images.githubusercontent.com/26452939/58153280-36a6f100-7ca1-11e9-9973-4646870f74d1.png> [image: image] <https://user-images.githubusercontent.com/26452939/58153171-019a9e80-7ca1-11e9-9b05-8fb8f443f720.png> — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#2>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AGQBX53GM4KESYAS4W3RHRLPWTVI7ANCNFSM4EJ75A2A> .

fantasticit · 2019-05-22T07:20:56Z

@brantcao 邮箱：[email protected] 。如果可以的话，麻烦帮我点个 star，谢谢。:)

YuyingZheng · 2019-05-22T07:22:37Z

你每次都好认真的回答每个人啊，点赞，去给你点了一个star

…

------------------ 原始邮件 ------------------ 发件人: "夜行"<[email protected]>; 发送时间: 2019年5月22日(星期三) 下午3:20 收件人: "justemit/coding-note"<[email protected]>; 抄送: "心语"<[email protected]>; "Mention"<[email protected]>; 主题: Re: [justemit/coding-note] Vue配置svg-sprite-loader以使用svg图标 (#2) @brantcao 邮箱：[email protected] 微信：kaivn07 。如果可以的话，麻烦帮我点个 star，谢谢。:) — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

brantcao · 2019-05-22T07:26:13Z

是的，太认真了，解决了我两天的难题。 yuying-kooboo <[email protected]> 于2019年5月22日周三下午3:22写道：

…

你每次都好认真的回答每个人啊，点赞，去给你点了一个star ------------------ 原始邮件 ------------------ 发件人: ***@***.***>; 发送时间: 2019年5月22日(星期三) 下午3:20 收件人: ***@***.***>; 抄送: ***@***.***>; ***@***.***>; 主题: Re: [justemit/coding-note] Vue配置svg-sprite-loader以使用svg图标 (#2) @brantcao ***@***.*** 微信：kaivn07 。如果可以的话，麻烦帮我点个 star，谢谢。:) — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#2>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AGQBX555JK7UOCZMJULUUODPWTYD5ANCNFSM4EJ75A2A> .

fantasticit · 2019-05-22T07:27:40Z

哈哈，谢谢你们

FredBrock · 2019-08-29T09:28:02Z

有没有办吧修改svg组件的颜色呢color ,我添加css {fill:red} 这样貌似无效

fantasticit · 2019-08-30T03:24:14Z

有没有办吧修改svg组件的颜色呢color ,我添加css {fill:red} 这样貌似无效

你需要结合所使用的 svg 源代码做出相应封装。图中例子，svg 中有 2 个 path，这两个 path 都是可以用 css 调整样式的。同理，封装相应 svg 组件需要定义好 props 使样式生效。

brantcao · 2019-09-12T02:39:11Z

Hi 目前，我遇到一个困难，你看你们能有办法吗？我们项目是一套代码，然后，26个网址都在调用，然后，每个站有自己独特的，然后，也有公用的都写到common目录里面。我开始 svg-sprite-loader 使用这个的时候，直接都放到common里面的，多站都可以一起调用。但是，现在新的需求，有一些icon svg 只有 am项目用，其他都用不到，假如，放到common里面的话，这样都很多冗余的了。不知道，有没有最理想的办法就是，能使用公用的 svg icon，同时，也把自己独特目录下的 svg 也假如进去。项目，大概结构：截图： http://h.pz.com/u/7842/56/5/156825591526.png http://h.pz.com/u/7842/56/5/156825591511.png thanks 夜行 <[email protected]> 于2019年5月22日周三下午3:20写道：

…

@brantcao <https://github.com/brantcao> ***@***.*** 微信：kaivn07 。如果可以的话，麻烦帮我点个 star，谢谢。:) — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#2>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AGQBX5ZCR5ADDSJX2UTXCUDPWTX5TANCNFSM4EJ75A2A> .

fantasticit · 2019-09-15T03:37:38Z

@brantcao 这个你得自己考虑。我的思路：不同站点分开打包，不同站点打包的 webpack 脚本大部分可以共用，然后在针对不同站点代码补充不同的 webpack 配置，可以看一下 webpack-merge 的文档。

brantcao · 2019-09-15T03:51:38Z

谢谢你的思路，感谢。 Justemit <[email protected]> 于2019年9月15日周日上午11:37写道：

…

@brantcao <https://github.com/brantcao> 这个你得自己考虑。我的思路：不同站点分开打包，不同站点打包的 webpack 脚本大部分可以共用，然后在针对不同站点代码补充不同的 webpack 配置，可以看一下 webpack-merge <https://github.com/survivejs/webpack-merge> 的文档。 — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#2>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AGQBX53L6LFIIEJBACCKGHTQJWUYHANCNFSM4EJ75A2A> .

wukaMM · 2020-05-28T07:01:24Z

您好，我也是按上面的配置做的，我的conf文件里面没有使用url-loader, svg除了用svg-sprite-loader处理之外，没有在其他的loader中处理了，但是使用的时候也是空白，0x0，能帮忙看看怎么回事吗

brantcao · 2020-05-28T08:03:03Z

Hi Zhxuc/Coding-Note 你可以加我qq 1149599859 ，然后，我帮你看看么。

…

On Thu, May 28, 2020 at 3:01 PM wukaMM ***@***.***> wrote: 您好，我也是按上面的配置做的，我的conf文件里面没有使用url-loader, svg除了用svg-sprite-loader处理之外，没有在其他的loader中处理了，但是使用的时候也是空白，0x0，能帮忙看看怎么回事吗 — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#2 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AGQBX54CNV4UXOY5HJG7DXTRTYD5DANCNFSM4EJ75A2A> .

fantasticit changed the title ~~在vue中的使用svg图标~~ vue配置svg-sprite-loader以使用svg图标 Jan 1, 2018

fantasticit changed the title ~~vue配置svg-sprite-loader以使用svg图标~~ Vue配置svg-sprite-loader以使用svg图标 Jan 1, 2018

fantasticit added Vue Svg and removed Svg labels Dec 6, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Vue配置svg-sprite-loader以使用svg图标 #2

Vue配置svg-sprite-loader以使用svg图标 #2

fantasticit commented Jan 1, 2018 •

edited

Loading

porrashuang commented Jul 9, 2018

fantasticit commented Jul 9, 2018

YuyingZheng commented Nov 6, 2018

fantasticit commented Nov 6, 2018

YuyingZheng commented Nov 6, 2018

fantasticit commented Nov 6, 2018

fantasticit commented Nov 6, 2018 •

edited

Loading

YuyingZheng commented Nov 6, 2018

fantasticit commented Nov 6, 2018 •

edited

Loading

qianlanse commented Mar 26, 2019

fantasticit commented Mar 26, 2019

brantcao commented May 22, 2019

brantcao commented May 22, 2019

fantasticit commented May 22, 2019 •

edited

Loading

brantcao commented May 22, 2019 via email

fantasticit commented May 22, 2019

brantcao commented May 22, 2019 via email

fantasticit commented May 22, 2019 •

edited

Loading

YuyingZheng commented May 22, 2019 via email

brantcao commented May 22, 2019 via email

fantasticit commented May 22, 2019

FredBrock commented Aug 29, 2019

fantasticit commented Aug 30, 2019

brantcao commented Sep 12, 2019 via email

fantasticit commented Sep 15, 2019

brantcao commented Sep 15, 2019 via email

wukaMM commented May 28, 2020

brantcao commented May 28, 2020 via email

Vue配置svg-sprite-loader以使用svg图标 #2

Vue配置svg-sprite-loader以使用svg图标 #2

Comments

fantasticit commented Jan 1, 2018 • edited Loading

svg-sprite-loader在vue中的使用

何为svg sprite

svg sprite与symbol元素

在vue中使用

porrashuang commented Jul 9, 2018

fantasticit commented Jul 9, 2018

YuyingZheng commented Nov 6, 2018

fantasticit commented Nov 6, 2018

YuyingZheng commented Nov 6, 2018

fantasticit commented Nov 6, 2018

fantasticit commented Nov 6, 2018 • edited Loading

YuyingZheng commented Nov 6, 2018

fantasticit commented Nov 6, 2018 • edited Loading

qianlanse commented Mar 26, 2019

fantasticit commented Mar 26, 2019

brantcao commented May 22, 2019

brantcao commented May 22, 2019

fantasticit commented May 22, 2019 • edited Loading

brantcao commented May 22, 2019 via email

fantasticit commented May 22, 2019

brantcao commented May 22, 2019 via email

fantasticit commented May 22, 2019 • edited Loading

YuyingZheng commented May 22, 2019 via email

brantcao commented May 22, 2019 via email

fantasticit commented May 22, 2019

FredBrock commented Aug 29, 2019

fantasticit commented Aug 30, 2019

brantcao commented Sep 12, 2019 via email

fantasticit commented Sep 15, 2019

brantcao commented Sep 15, 2019 via email

wukaMM commented May 28, 2020

brantcao commented May 28, 2020 via email

fantasticit commented Jan 1, 2018 •

edited

Loading

`svg-sprite-loader`在vue中的使用

何为`svg sprite`

`svg sprite`与`symbol`元素

在`vue`中使用

fantasticit commented Nov 6, 2018 •

edited

Loading

fantasticit commented Nov 6, 2018 •

edited

Loading

fantasticit commented May 22, 2019 •

edited

Loading

fantasticit commented May 22, 2019 •

edited

Loading