经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » HTML/CSS » HTML5 » 查看文章
vue-cli3使用svg
来源:cnblogs  作者:Barrett_07  时间:2019/11/8 8:48:06  对本文有异议
  • 执行命令安装插件 npm install svg-sprite-loader --save-dev
  • vue.config.js中,添加配置

    1. module.exports = {
    2. ...
    3. chainWebpack: config => {
    4. // 一个规则里的 基础Loader
    5. // svg是个基础loader
    6. const svgRule = config.module.rule("svg");
    7. // 清除已有的所有 loader。
    8. // 如果你不这样做,接下来的 loader 会附加在该规则现有的 loader 之后。
    9. svgRule.uses.clear();
    10. // 添加要替换的 loader
    11. svgRule
    12. .use("svg-sprite-loader")
    13. .loader("svg-sprite-loader")
    14. .options({
    15. symbolId: "icon-[name]"
    16. });
    17. },
    18. ...
    19. }
  • 创建vue公共svg组件svgIcon.vue

    1. <template>
    2. <svg :class="svgClass" aria-hidden="true">
    3. <use :xlink:href="iconName" />
    4. </svg>
    5. </template>
    6. <script>
    7. export default {
    8. name: "svgIcon",
    9. props: {
    10. iconClass: {
    11. type: String,
    12. required: true,
    13. },
    14. className: {
    15. type: String,
    16. default: '',
    17. },
    18. },
    19. computed: {
    20. iconName () {
    21. return `#icon-${this.iconClass}`
    22. },
    23. svgClass () {
    24. if(this.className) {
    25. return `svg-icon${this.className}`
    26. }else {
    27. return 'svg-icon'
    28. }
    29. },
    30. },
    31. }
    32. </script>
    33. <style lang="scss" scoped>
    34. .svg-icon {
    35. width: 1em;
    36. height: 1em;
    37. vertical-align: -0.15em;
    38. fill: currentColor;
    39. overflow: hidden;
    40. }
    41. </style>
  • 新建svg-icon文件夹,文件夹下包含svgindex.js,分别为svg原文件和引入代码。index.js内容为:

    1. import Vue from 'vue'
    2. import svgIcon from '@/components/svgIcon'
    3. Vue.component('svg-icon', svgIcon) // 挂载在全局
    4. const requireAll = requireContext => requireContext.keys().map(requireContext)
    5. const req = require.context('./svg', false, /\.svg$/)
    6. requireAll(req);
  • 使用 <svg-icon icon-class="svgname" /> // svgname必须与/svg-icon/svg/下的svg文件命名一致。

原文链接:http://www.cnblogs.com/Tianbao/p/11817071.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号