制作svg精灵图

 1、把所有的svg精灵图都包裹到一个svg标签中

    <svg>
      <svg t="1673404435705" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2680" width="32" height="32"><path d="M929.70745 487.72513 167.942967 487.72513l358.793666-318.918493c12.390191-11.012821 13.505595-29.982872 2.493797-42.37204-11.010775-12.388145-29.979802-13.506619-42.369993-2.492774L74.839499 490.168786c-6.407943 5.695722-10.073426 13.859659-10.073426 22.432918 0 8.573259 3.665483 16.737196 10.073426 22.432918l412.019914 366.227985c5.717212 5.082762 12.83533 7.581676 19.926842 7.581676 8.275477-0.002047 16.515139-3.403516 22.443152-10.07445 11.012821-12.389168 9.897418-31.359218-2.493797-42.37204L179.893136 548.100196l749.814314 0c16.575514 0 30.013571-13.612019 30.013571-30.187533S946.283987 487.72513 929.70745 487.72513z" fill="#303035" p-id="2681"></path></svg>
      <svg t="1672370481927" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12066" width="32" height="32"><path d="M244.3 930.6c-36 0-69.9-14-95.4-39.5l-12.2-12.2C84 826.2 84 740.6 136.6 688l275.2-275.2c-20.7-99.8 18.5-203.5 102.6-265 74.1-54.3 173.2-64.9 258.5-27.7 13.7 6 23.5 18.3 26.3 33 2.8 14.7-1.9 29.8-12.4 40.3L690 290.2l47.5 47.5 96.6-96.6c10.5-10.6 25.5-15.2 40.3-12.4 14.7 2.8 27 12.6 33 26.3 43.5 99.5 22.2 213.3-54.5 289.9-63 63-152.1 89-238.1 71.1L339.7 891c-25.5 25.5-59.4 39.6-95.4 39.6zM664 188.4c-34.4 0.7-68.2 11.6-96.3 32.2-60.3 44.2-85.5 121.4-62.7 192 5.2 16.1 0.9 33.8-11 45.8L200.5 751.8c-17.4 17.4-17.4 45.7 0 63.1l12.2 12.2c17.4 17.4 45.7 17.4 63.1 0l293.5-293.5c12-12 29.7-16.2 45.8-11 61.7 19.9 128.3 3.9 174-41.7 32.1-32.1 49.3-74.1 50.2-117.3l-69.8 69.8c-17.6 17.6-46.2 17.6-63.9 0L594.2 322.1c-17.6-17.6-17.6-46.2 0-63.8l69.8-69.9z" fill="#000000" p-id="12067"></path></svg>
      <svg t="1678269776546" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3988" width="32" height="32"><path d="M909.050991 169.476903l-217.554898 0 0-31.346939c0-39.5866-32.205493-71.792093-71.793116-71.792093L408.15591 66.337871c-39.5866 0-71.792093 32.205493-71.792093 71.792093l0 31.346939L113.349581 169.476903c-11.013845 0-19.942191 8.940626-19.942191 19.954471s8.928347 19.954471 19.942191 19.954471l84.264149 0 0 640.687918c0 60.479443 49.203632 109.683075 109.683075 109.683075l416.474366 0c60.479443 0 109.683075-49.203632 109.683075-109.683075L833.454246 209.385844l75.595722 0c11.012821 0 19.942191-8.940626 19.942191-19.954471S920.063813 169.476903 909.050991 169.476903zM376.2482 138.130987c0-17.593703 14.314007-31.907711 31.907711-31.907711l211.547067 0c17.593703 0 31.907711 14.314007 31.907711 31.907711l0 31.346939L376.2482 169.477926 376.2482 138.130987zM793.569864 850.074785c0 38.486546-31.312146 69.798692-69.798692 69.798692L307.297828 919.873478c-38.486546 0-69.798692-31.312146-69.798692-69.798692L237.499136 211.042577l556.070728 0L793.569864 850.074785z" fill="#909399" p-id="3989"></path><path d="M510.662539 861.276918c11.012821 0 19.954471-8.92937 19.954471-19.942191L530.61701 294.912753c0-11.013845-8.94165-19.942191-19.954471-19.942191s-19.954471 8.928347-19.954471 19.942191L490.708068 841.334727C490.708068 852.347548 499.649717 861.276918 510.662539 861.276918z" fill="#909399" p-id="3990"></path><path d="M374.562814 801.449321c11.012821 0 19.954471-8.92937 19.954471-19.942191L394.517285 354.74035c0-11.013845-8.94165-19.942191-19.954471-19.942191s-19.954471 8.928347-19.954471 19.942191l0 426.76678C354.608344 792.519951 363.549993 801.449321 374.562814 801.449321z" fill="#909399" p-id="3991"></path><path d="M649.832182 801.449321c11.012821 0 19.954471-8.92937 19.954471-19.942191L669.786653 354.74035c0-11.013845-8.94165-19.942191-19.954471-19.942191s-19.954471 8.928347-19.954471 19.942191l0 426.76678C629.877711 792.519951 638.81936 801.449321 649.832182 801.449321z" fill="#909399" p-id="3992"></path></svg>
    </svg>

2、把内层svg的标签都修改为symbol

    <svg>
      <symbol t="1673404435705" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2680" width="32" height="32"><path d="M929.70745 487.72513 167.942967 487.72513l358.793666-318.918493c12.390191-11.012821 13.505595-29.982872 2.493797-42.37204-11.010775-12.388145-29.979802-13.506619-42.369993-2.492774L74.839499 490.168786c-6.407943 5.695722-10.073426 13.859659-10.073426 22.432918 0 8.573259 3.665483 16.737196 10.073426 22.432918l412.019914 366.227985c5.717212 5.082762 12.83533 7.581676 19.926842 7.581676 8.275477-0.002047 16.515139-3.403516 22.443152-10.07445 11.012821-12.389168 9.897418-31.359218-2.493797-42.37204L179.893136 548.100196l749.814314 0c16.575514 0 30.013571-13.612019 30.013571-30.187533S946.283987 487.72513 929.70745 487.72513z" fill="#303035" p-id="2681"></path></symbol>
      <symbol t="1672370481927" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12066" width="32" height="32"><path d="M244.3 930.6c-36 0-69.9-14-95.4-39.5l-12.2-12.2C84 826.2 84 740.6 136.6 688l275.2-275.2c-20.7-99.8 18.5-203.5 102.6-265 74.1-54.3 173.2-64.9 258.5-27.7 13.7 6 23.5 18.3 26.3 33 2.8 14.7-1.9 29.8-12.4 40.3L690 290.2l47.5 47.5 96.6-96.6c10.5-10.6 25.5-15.2 40.3-12.4 14.7 2.8 27 12.6 33 26.3 43.5 99.5 22.2 213.3-54.5 289.9-63 63-152.1 89-238.1 71.1L339.7 891c-25.5 25.5-59.4 39.6-95.4 39.6zM664 188.4c-34.4 0.7-68.2 11.6-96.3 32.2-60.3 44.2-85.5 121.4-62.7 192 5.2 16.1 0.9 33.8-11 45.8L200.5 751.8c-17.4 17.4-17.4 45.7 0 63.1l12.2 12.2c17.4 17.4 45.7 17.4 63.1 0l293.5-293.5c12-12 29.7-16.2 45.8-11 61.7 19.9 128.3 3.9 174-41.7 32.1-32.1 49.3-74.1 50.2-117.3l-69.8 69.8c-17.6 17.6-46.2 17.6-63.9 0L594.2 322.1c-17.6-17.6-17.6-46.2 0-63.8l69.8-69.9z" fill="#000000" p-id="12067"></path></symbol>
      <symbol t="1678269776546" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3988" width="32" height="32"><path d="M909.050991 169.476903l-217.554898 0 0-31.346939c0-39.5866-32.205493-71.792093-71.793116-71.792093L408.15591 66.337871c-39.5866 0-71.792093 32.205493-71.792093 71.792093l0 31.346939L113.349581 169.476903c-11.013845 0-19.942191 8.940626-19.942191 19.954471s8.928347 19.954471 19.942191 19.954471l84.264149 0 0 640.687918c0 60.479443 49.203632 109.683075 109.683075 109.683075l416.474366 0c60.479443 0 109.683075-49.203632 109.683075-109.683075L833.454246 209.385844l75.595722 0c11.012821 0 19.942191-8.940626 19.942191-19.954471S920.063813 169.476903 909.050991 169.476903zM376.2482 138.130987c0-17.593703 14.314007-31.907711 31.907711-31.907711l211.547067 0c17.593703 0 31.907711 14.314007 31.907711 31.907711l0 31.346939L376.2482 169.477926 376.2482 138.130987zM793.569864 850.074785c0 38.486546-31.312146 69.798692-69.798692 69.798692L307.297828 919.873478c-38.486546 0-69.798692-31.312146-69.798692-69.798692L237.499136 211.042577l556.070728 0L793.569864 850.074785z" fill="#909399" p-id="3989"></path><path d="M510.662539 861.276918c11.012821 0 19.954471-8.92937 19.954471-19.942191L530.61701 294.912753c0-11.013845-8.94165-19.942191-19.954471-19.942191s-19.954471 8.928347-19.954471 19.942191L490.708068 841.334727C490.708068 852.347548 499.649717 861.276918 510.662539 861.276918z" fill="#909399" p-id="3990"></path><path d="M374.562814 801.449321c11.012821 0 19.954471-8.92937 19.954471-19.942191L394.517285 354.74035c0-11.013845-8.94165-19.942191-19.954471-19.942191s-19.954471 8.928347-19.954471 19.942191l0 426.76678C354.608344 792.519951 363.549993 801.449321 374.562814 801.449321z" fill="#909399" p-id="3991"></path><path d="M649.832182 801.449321c11.012821 0 19.954471-8.92937 19.954471-19.942191L669.786653 354.74035c0-11.013845-8.94165-19.942191-19.954471-19.942191s-19.954471 8.928347-19.954471 19.942191l0 426.76678C629.877711 792.519951 638.81936 801.449321 649.832182 801.449321z" fill="#909399" p-id="3992"></path></symbol>
    </svg>

3、给每个symbol标签,添加id

    <svg>
      <symbol id="one" t="1673404435705" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2680" width="32" height="32"><path d="M929.70745 487.72513 167.942967 487.72513l358.793666-318.918493c12.390191-11.012821 13.505595-29.982872 2.493797-42.37204-11.010775-12.388145-29.979802-13.506619-42.369993-2.492774L74.839499 490.168786c-6.407943 5.695722-10.073426 13.859659-10.073426 22.432918 0 8.573259 3.665483 16.737196 10.073426 22.432918l412.019914 366.227985c5.717212 5.082762 12.83533 7.581676 19.926842 7.581676 8.275477-0.002047 16.515139-3.403516 22.443152-10.07445 11.012821-12.389168 9.897418-31.359218-2.493797-42.37204L179.893136 548.100196l749.814314 0c16.575514 0 30.013571-13.612019 30.013571-30.187533S946.283987 487.72513 929.70745 487.72513z" fill="#303035" p-id="2681" /></symbol>
      <symbol id="two" t="1672370481927" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12066" width="32" height="32"><path d="M244.3 930.6c-36 0-69.9-14-95.4-39.5l-12.2-12.2C84 826.2 84 740.6 136.6 688l275.2-275.2c-20.7-99.8 18.5-203.5 102.6-265 74.1-54.3 173.2-64.9 258.5-27.7 13.7 6 23.5 18.3 26.3 33 2.8 14.7-1.9 29.8-12.4 40.3L690 290.2l47.5 47.5 96.6-96.6c10.5-10.6 25.5-15.2 40.3-12.4 14.7 2.8 27 12.6 33 26.3 43.5 99.5 22.2 213.3-54.5 289.9-63 63-152.1 89-238.1 71.1L339.7 891c-25.5 25.5-59.4 39.6-95.4 39.6zM664 188.4c-34.4 0.7-68.2 11.6-96.3 32.2-60.3 44.2-85.5 121.4-62.7 192 5.2 16.1 0.9 33.8-11 45.8L200.5 751.8c-17.4 17.4-17.4 45.7 0 63.1l12.2 12.2c17.4 17.4 45.7 17.4 63.1 0l293.5-293.5c12-12 29.7-16.2 45.8-11 61.7 19.9 128.3 3.9 174-41.7 32.1-32.1 49.3-74.1 50.2-117.3l-69.8 69.8c-17.6 17.6-46.2 17.6-63.9 0L594.2 322.1c-17.6-17.6-17.6-46.2 0-63.8l69.8-69.9z" fill="#000000" p-id="12067" /></symbol>
      <symbol id="three" t="1678269776546" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3988" width="32" height="32"><path d="M909.050991 169.476903l-217.554898 0 0-31.346939c0-39.5866-32.205493-71.792093-71.793116-71.792093L408.15591 66.337871c-39.5866 0-71.792093 32.205493-71.792093 71.792093l0 31.346939L113.349581 169.476903c-11.013845 0-19.942191 8.940626-19.942191 19.954471s8.928347 19.954471 19.942191 19.954471l84.264149 0 0 640.687918c0 60.479443 49.203632 109.683075 109.683075 109.683075l416.474366 0c60.479443 0 109.683075-49.203632 109.683075-109.683075L833.454246 209.385844l75.595722 0c11.012821 0 19.942191-8.940626 19.942191-19.954471S920.063813 169.476903 909.050991 169.476903zM376.2482 138.130987c0-17.593703 14.314007-31.907711 31.907711-31.907711l211.547067 0c17.593703 0 31.907711 14.314007 31.907711 31.907711l0 31.346939L376.2482 169.477926 376.2482 138.130987zM793.569864 850.074785c0 38.486546-31.312146 69.798692-69.798692 69.798692L307.297828 919.873478c-38.486546 0-69.798692-31.312146-69.798692-69.798692L237.499136 211.042577l556.070728 0L793.569864 850.074785z" fill="#909399" p-id="3989" /><path d="M510.662539 861.276918c11.012821 0 19.954471-8.92937 19.954471-19.942191L530.61701 294.912753c0-11.013845-8.94165-19.942191-19.954471-19.942191s-19.954471 8.928347-19.954471 19.942191L490.708068 841.334727C490.708068 852.347548 499.649717 861.276918 510.662539 861.276918z" fill="#909399" p-id="3990" /><path d="M374.562814 801.449321c11.012821 0 19.954471-8.92937 19.954471-19.942191L394.517285 354.74035c0-11.013845-8.94165-19.942191-19.954471-19.942191s-19.954471 8.928347-19.954471 19.942191l0 426.76678C354.608344 792.519951 363.549993 801.449321 374.562814 801.449321z" fill="#909399" p-id="3991" /><path d="M649.832182 801.449321c11.012821 0 19.954471-8.92937 19.954471-19.942191L669.786653 354.74035c0-11.013845-8.94165-19.942191-19.954471-19.942191s-19.954471 8.928347-19.954471 19.942191l0 426.76678C629.877711 792.519951 638.81936 801.449321 649.832182 801.449321z" fill="#909399" p-id="3992" /></symbol>
    </svg>

4、使用svg精灵图:新建一个svg标签,内层嵌套use标签,使用use标签的 xlink:href属性,引用symbol的id,id前要加#

    <svg>
      <use xlink:href="#one" />
    </svg>
    <svg>
      <use xlink:href="#two" />
    </svg>
    <svg>
      <use xlink:href="#three" />
    </svg>

5、结果如下

 

 

 

 

相关推荐

  1. flutter 播放SVGA

    2024-02-05 07:20:03       36 阅读
  2. 轮播制作

    2024-02-05 07:20:03       37 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-02-05 07:20:03       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-02-05 07:20:03       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-02-05 07:20:03       18 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-02-05 07:20:03       20 阅读

热门阅读

  1. 在建站和小程序方面,公司如何提升客户的体验

    2024-02-05 07:20:03       32 阅读
  2. 微信小程序封装wx.request以及小程序登录

    2024-02-05 07:20:03       33 阅读
  3. 【微信小程序】微信小程序开发:从入门到精通

    2024-02-05 07:20:03       29 阅读
  4. 26种设计模式之单例模式

    2024-02-05 07:20:03       24 阅读
  5. 一知半解,临时解决ajax跨域请求

    2024-02-05 07:20:03       26 阅读
  6. 后端返回给前端的数据格式有哪些?

    2024-02-05 07:20:03       34 阅读
  7. C 检查小端存储还是大端

    2024-02-05 07:20:03       25 阅读
  8. appium抓包总结

    2024-02-05 07:20:03       35 阅读
  9. ansible批量修改主机密码

    2024-02-05 07:20:03       30 阅读
  10. Leetcode 3027. Find the Number of Ways to Place People II

    2024-02-05 07:20:03       32 阅读