我在做ssr的时候，照着网上教的方法要封装一个自定义图标组件，但是一直不成功，老师可以帮我看看吗
来源：3-9 话题讨论：CSS预编译
weixin_精慕门0029357
2023-02-16
这个是我存放图标文件的
这个是我做的引入
这个是我封装的图标组件，我给每个图标都加了一个红色边框
这个是我使用之后的状态，可以看到图标组件使用成功，但是图标不显示，同时也没有报错
2回答
-
Harry_wang
2023-02-25
代码我帮你看了，没问题，页面上图标才不显示的是因为你项目里的svg图标本身就不能正常显示。
我找了一个svg图标放在项目里就可以打开。
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1677338182810" class="icon" viewBox="0 0 1239 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2849" xmlns:xlink="http://www.w3.org/1999/xlink" width="38.71875" height="32"><path d="M717.865062 899.486106l-39.910605-23.536026 36.84055-25.582694c13.303501-8.18647 18.420326-28.652544 7.163494-45.025485-9.210163-12.279706-28.653773-15.349555-41.957274-6.139802l-24.560333 17.396224 0-31.722492c0-15.349555-14.326886-30.699213-31.723827-30.699213s-31.723827 15.349555-31.723827 30.699213l0 36.839023-27.630387-19.44279c-16.373555-9.209754-33.770496-4.093235-42.980659 9.209754-10.233446 15.349555-6.140109 34.792448 9.210163 44.002202l34.793882 21.489459-41.957274 27.629261c-13.303501 9.209754-18.420326 27.629261-8.186778 41.955533 6.140109 9.209754 16.373555 13.302989 25.583718 13.302989 6.140109 0 11.256832-1.023283 17.396941-5.116518l33.770496-22.512742 0 36.839023c0 16.372941 14.326886 30.699213 31.723827 30.699213s31.723827-14.326272 31.723827-30.699213l0-35.815717 28.653773 19.44279c6.140109 3.069952 12.280218 4.093235 16.373555 4.093235 10.233446 0 19.44361-4.093235 25.583718-14.326272C736.285389 927.115366 733.215334 909.719245 717.865062 899.486106L717.865062 899.486106zM962.445517 867.76361l-24.560333-17.396224 23.53705-13.302989c11.256832-9.209754 13.303501-25.582694 5.116723-36.839014-6.140109-11.25632-23.53705-15.349555-34.793882-7.163187l-13.303501 8.18647 0-16.372899c0-13.302989-12.280218-24.559309-26.607104-24.559309-13.303501 0-24.560333 11.25632-24.560333 24.559309l0 19.442818-16.373555-10.233037c-11.256832-5.116518-27.630387-3.069952-36.84055 8.18647-6.140109 12.279706-3.070054 28.652544 9.210163 36.839014l20.466995 12.279706-24.560333 18.419507c-12.280218 8.18647-16.373555 23.536026-8.186778 35.815731 4.09344 7.163187 13.303501 10.233037 22.513664 10.233037 4.09344 0 9.210163-1.023283 12.280218-3.069952l21.490381-14.326272 0 22.512736c0 12.279706 11.256832 24.559309 24.560333 24.559309 14.326886 0 26.607104-12.279706 26.607104-24.559309l0-21.48943 15.350272 12.279706c5.116723 2.046566 9.210163 3.069952 14.326886 3.069952 8.186778 0 17.396941-3.069952 21.490381-11.25632C976.772403 890.276352 973.702349 875.95008 962.445517 867.76361L962.445517 867.76361zM413.930394 867.76361l-24.560333-17.396224 22.513664-13.302989c12.280218-9.209754 15.350272-25.582694 6.140109-36.839014-7.163494-11.25632-23.53705-15.349555-35.817267-7.163187l-13.303501 8.18647 0-16.372899c0-13.302989-11.256832-24.559309-24.560333-24.559309-15.350272 0-27.630387 11.25632-27.630387 24.559309l0 19.442818-14.326886-10.233037c-12.280218-5.116518-28.653773-3.069952-35.817267 8.18647-8.186778 12.279706-4.09344 28.652544 7.163494 36.839014l21.490381 12.279706-25.583718 18.419507c-11.256832 8.18647-15.350272 23.536026-7.163494 35.815731 5.116723 7.163187 12.280218 10.233037 20.466995 10.233037 5.116723 0 11.256832-1.023283 14.326886-3.069952l19.44361-14.326272 0 22.512736c0 12.279706 12.280218 24.559309 27.630387 24.559309 13.303501 0 24.560333-12.279706 24.560333-24.559309l0-21.48943 16.373555 12.279706c5.116723 2.046566 9.210163 3.069952 14.326886 3.069952 8.186778 0 16.373555-3.069952 21.490381-11.25632C429.280666 890.276352 426.210611 875.95008 413.930394 867.76361L413.930394 867.76361zM984.959181 210.80105c-11.256832 0-22.513664 1.023283-35.817267 3.069952-38.887219-119.726797-169.875968-213.871002-313.144832-213.871002l-2.046698 0c-218.996736 1.023283-319.284941 141.216256-353.055437 254.803251-11.256832-1.023283-22.513664-2.046566-34.793882-2.046566-86.984704 0-165.782528 42.978816-212.856627 117.68023l-1.023386 1.023283c-33.770496 63.444992-68.564378 205.684531 54.237491 298.805453 38.887219 29.67593 94.148096 31.722496 115.638477 31.722496l1.023349 0 814.585923 0 10.233491 0c72.657818-13.302989 209.786573-85.957734 209.786573-249.686733C1237.726413 319.271526 1125.158093 210.80105 984.959181 210.80105L984.959181 210.80105zM1010.543002 588.40105l-807.422479 0c0 0 0 0-1.023386 0-20.466995 0-41.957274-5.116518-48.097382-9.209754-30.700442-22.512742-42.980659-52.18857-39.910605-92.097536 2.046669-30.699213 16.373555-55.258522 17.396941-59.351757 34.793882-57.30519 93.124813-63.444992 114.615091-63.444992 22.513664 0 36.84055 6.139802 41.957274 10.233037 16.373555 12.279706 37.863936 14.326272 58.330931 8.18647 16.373555-8.18647 30.700442-27.629261 32.747213-46.048768 2.046669-24.559309 28.653773-223.080755 254.813901-224.104038l2.046698 0c117.685146 0 209.786573 93.120819 213.880013 170.892186 0 19.44279 8.186778 34.792448 23.53705 45.025485 14.326886 11.25632 32.747213 12.279706 50.144154 8.18647 20.466995-8.18647 41.957274-12.279706 61.400986-12.279706 86.984704 0 140.19881 67.538227 140.19881 127.913267C1125.158093 553.608704 1033.056666 583.284531 1010.543002 588.40105z" p-id="2850" fill="#ffffff"></path></svg>
00 -
Harry_wang
2023-02-16
项目地址发一下，我看下
022023-02-17
相似问题