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

[fantasticit]

svg-sprite-loader在vue中的使用

何为svg sprite

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

svg sprite与symbol元素

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

在vue中使用

1. 安装svg-sprite-loader 执行npm install --save-dev svg-sprite-loader

2. 修改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了）

3. 添加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>

4. 新建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

5. 在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 }
})

6. 如何使用 以我的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>

[porrashuang]

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

[fantasticit]

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

[YuyingZheng]

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

[fantasticit]

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

[YuyingZheng]

这是我的原文件：

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

[fantasticit]

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

[fantasticit]

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

[YuyingZheng]

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

[fantasticit]

@yuying-kooboo :)

[qianlanse]

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

[fantasticit]

@qianlanse

https://github.com/kisenka/svg-sprite-loader/issues/233 https://github.com/kisenka/svg-sprite-loader/issues/185

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

[brantcao]

为什么我的不生效呢

[brantcao]

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

[fantasticit]

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

[brantcao]

你好， 可以的，我本来都是demo。太感谢你了。 firstVue.zip https://drive.google.com/file/d/1LaDce5ttOqPQB-V23dIGFfU-qS6K_Pae/view?usp=drive_web

夜行 notifications@github.com 于2019年5月22日周三 上午11:30写道：

@brantcao https://github.com/brantcao 你可以发一份你的代码（简化后的）给我们，我看一下，因为这样在 git issues 里聊的话太费劲了。邮箱：bken2016@163.com

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/justemit/coding-note/issues/2?email_source=notifications&email_token=AGQBX5674SAIBHBVRHIYDADPWS44PA5CNFSM4EJ75A2KYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODV5ZMMQ#issuecomment-494638642, or mute the thread https://github.com/notifications/unsubscribe-auth/AGQBX53QHIK4CTEB7KEDJ7TPWS44PANCNFSM4EJ75A2A .

[fantasticit]

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

[brantcao]

你好，太感谢你了，我研究这个问题，两天了，因为我自己没注意细节，一直没有解决这个问题。真的非常感谢你。请问以后假如有其他问题，可以通过什么方式给你留言呢？ 再次表示感谢。

夜行 notifications@github.com 于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 https://github.com/justemit/coding-note/issues/2?email_source=notifications&email_token=AGQBX57RMGXMJ5OUYY7V34DPWTVI7A5CNFSM4EJ75A2KYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODV6C6RA#issuecomment-494677828, or mute the thread https://github.com/notifications/unsubscribe-auth/AGQBX53GM4KESYAS4W3RHRLPWTVI7ANCNFSM4EJ75A2A .

[fantasticit]

@brantcao 邮箱：bken2016@163.com 。如果可以的话，麻烦帮我点个 star，谢谢。:)

[YuyingZheng]

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

------------------ 原始邮件 ------------------ 发件人: "夜行"notifications@github.com; 发送时间: 2019年5月22日(星期三) 下午3:20 收件人: "justemit/coding-note"coding-note@noreply.github.com; 抄送: "心语"719982185@qq.com; "Mention"mention@noreply.github.com; 主题: Re: [justemit/coding-note] Vue配置svg-sprite-loader以使用svg图标 (#2)

@brantcao 邮箱：bken2016@163.com 微信：kaivn07 。如果可以的话，麻烦帮我点个 star，谢谢。:)

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[brantcao]

是的，太认真了，解决了我两天的难题。

yuying-kooboo notifications@github.com 于2019年5月22日周三 下午3:22写道：

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

------------------ 原始邮件 ------------------ 发件人: "夜行"notifications@github.com; 发送时间: 2019年5月22日(星期三) 下午3:20 收件人: "justemit/coding-note"coding-note@noreply.github.com; 抄送: "心语"719982185@qq.com; "Mention"mention@noreply.github.com; 主题: Re: [justemit/coding-note] Vue配置svg-sprite-loader以使用svg图标 (#2)

@brantcao 邮箱：bken2016@163.com 微信：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 https://github.com/justemit/coding-note/issues/2?email_source=notifications&email_token=AGQBX52B2RDBXNFXKRENZBTPWTYD5A5CNFSM4EJ75A2KYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODV6EWLA#issuecomment-494684972, or mute the thread https://github.com/notifications/unsubscribe-auth/AGQBX555JK7UOCZMJULUUODPWTYD5ANCNFSM4EJ75A2A .

[fantasticit]

哈哈，谢谢你们

[FredBrock]

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

[fantasticit]

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

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

[brantcao]

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

夜行 notifications@github.com 于2019年5月22日周三 下午3:20写道：

@brantcao https://github.com/brantcao 邮箱：bken2016@163.com 微信：kaivn07 。如果可以的话，麻烦帮我点个 star，谢谢。:)

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/justemit/coding-note/issues/2?email_source=notifications&email_token=AGQBX57NQFIB3C2HW6E7F2LPWTX5TA5CNFSM4EJ75A2KYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODV6ESPQ#issuecomment-494684478, or mute the thread https://github.com/notifications/unsubscribe-auth/AGQBX5ZCR5ADDSJX2UTXCUDPWTX5TANCNFSM4EJ75A2A .

[fantasticit]

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

[brantcao]

谢谢你的思路，感谢。

Justemit notifications@github.com 于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 https://github.com/justemit/coding-note/issues/2?email_source=notifications&email_token=AGQBX5YXY3QISIDMZOXMKDLQJWUYHA5CNFSM4EJ75A2KYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD6XIOUI#issuecomment-531531601, or mute the thread https://github.com/notifications/unsubscribe-auth/AGQBX53L6LFIIEJBACCKGHTQJWUYHANCNFSM4EJ75A2A .

[wukaMM]

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

[brantcao]

Hi Zhxuc/Coding-Note

你可以加我qq 1149599859 ，然后，我帮你看看么。

On Thu, May 28, 2020 at 3:01 PM wukaMM notifications@github.com 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 https://github.com/zhxuc/coding-note/issues/2#issuecomment-635148672, or unsubscribe https://github.com/notifications/unsubscribe-auth/AGQBX54CNV4UXOY5HJG7DXTRTYD5DANCNFSM4EJ75A2A .