Expectation:
In React app, I'm trying to display an svg icon (from an svg sprite sheet) in h1::before either using background-image or content:url().
It ends up showing nothing.
// in App.js
import "./styles.css";
export default function App() {
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
</div>
);
}
// in styles.css
h1::before {
content: "...";
border: 1px solid grey;
background-image: url(icons.svg#working-at-home);
width: 15px;
height: 15px;
}
// in icons.svg
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"><symbol id="working-at-home" viewBox="0 0 512.006 512.006"><title>working-at-home</title><g><path d="m360.801 213.483 12.911-77.461h20.004l23.994 120h30.591l-27.589-137.944c-1.406-7.002-7.559-12.056-14.707-12.056h-27.295l12.09-72.539c1.362-8.174-4.16-15.894-12.334-17.256-8.145-1.509-15.894 4.146-17.256 12.334l-30 180c-1.621 9.727 4.953 15.926 12.344 17.209 7.392 1.283 15.6-2.35 17.247-12.287z"/><path d="m256.006 496.022h30c8.284 0 15-6.716 15-15v-135c0-33.138-26.863-60-60-60h-121c-10.977 0-21.14-3.177-30-8.344v38.344c0 16.567 13.431 30 30 30h121v135c0 8.284 6.716 15 15 15z"/><path d="m120.006 436.022v30h-15c-8.291 0-15 6.709-15 15s6.709 15 15 15h60c8.291 0 15-6.709 15-15s-6.709-15-15-15h-15v-30h31c16.569 0 30-13.433 30-30 0-16.569-13.431-30-30-30h-121v-45c0-151.802-30.293-214.131-31.582-216.709-3.721-7.397-12.7-10.371-20.127-6.709-7.412 3.706-10.415 12.715-6.709 20.127.292.571 28.418 58.506 28.418 203.291 0 5.235 0 63.704 0 60 0 24.853 20.147 45 45 45z"/><path d="m497.006 286.022c-6.442 0-196.41 0-189.408 0 7.817 8.668 13.885 18.792 17.88 30h95.528v165c0 8.291 6.709 15 15 15s15-6.709 15-15v-165h46c8.291 0 15-6.709 15-15s-6.709-15-15-15z"/></g><circle cx="121.006" cy="76.022" r="45"/><path d="m91.006 151.022v75c0 16.567 13.431 30 30 30h105c8.284 0 15-6.716 15-15 0-24.853-20.147-45-45-45h-45v-45c0-16.569-13.431-30-30-30s-30 13.431-30 30z"/></symbol><symbol id="github" viewBox="0 0 24 24"><title>github</title><path d="m12 .5c-6.63 0-12 5.28-12 11.792 0 5.211 3.438 9.63 8.205 11.188.6.111.82-.254.82-.567 0-.28-.01-1.022-.015-2.005-3.338.711-4.042-1.582-4.042-1.582-.546-1.361-1.335-1.725-1.335-1.725-1.087-.731.084-.716.084-.716 1.205.082 1.838 1.215 1.838 1.215 1.07 1.803 2.809 1.282 3.495.981.108-.763.417-1.282.76-1.577-2.665-.295-5.466-1.309-5.466-5.827 0-1.287.465-2.339 1.235-3.164-.135-.298-.54-1.497.105-3.121 0 0 1.005-.316 3.3 1.209.96-.262 1.98-.392 3-.398 1.02.006 2.04.136 3 .398 2.28-1.525 3.285-1.209 3.285-1.209.645 1.624.24 2.823.12 3.121.765.825 1.23 1.877 1.23 3.164 0 4.53-2.805 5.527-5.475 5.817.42.354.81 1.077.81 2.182 0 1.578-.015 2.846-.015 3.229 0 .309.21.678.825.56 4.801-1.548 8.236-5.97 8.236-11.173 0-6.512-5.373-11.792-12-11.792z"/></symbol><symbol id="phone-call" viewBox="0 0 473.806 473.806"><title>phone-call</title><path d="M374.456,293.506c-9.7-10.1-21.4-15.5-33.8-15.5c-12.3,0-24.1,5.3-34.2,15.4l-31.6,31.5c-2.6-1.4-5.2-2.7-7.7-4 c-3.6-1.8-7-3.5-9.9-5.3c-29.6-18.8-56.5-43.3-82.3-75c-12.5-15.8-20.9-29.1-27-42.6c8.2-7.5,15.8-15.3,23.2-22.8 c2.8-2.8,5.6-5.7,8.4-8.5c21-21,21-48.2,0-69.2l-27.3-27.3c-3.1-3.1-6.3-6.3-9.3-9.5c-6-6.2-12.3-12.6-18.8-18.6 c-9.7-9.6-21.3-14.7-33.5-14.7s-24,5.1-34,14.7c-0.1,0.1-0.1,0.1-0.2,0.2l-34,34.3c-12.8,12.8-20.1,28.4-21.7,46.5 c-2.4,29.2,6.2,56.4,12.8,74.2c16.2,43.7,40.4,84.2,76.5,127.6c43.8,52.3,96.5,93.6,156.7,122.7c23,10.9,53.7,23.8,88,26 c2.1,0.1,4.3,0.2,6.3,0.2c23.1,0,42.5-8.3,57.7-24.8c0.1-0.2,0.3-0.3,0.4-0.5c5.2-6.3,11.2-12,17.5-18.1c4.3-4.1,8.7-8.4,13-12.9 c9.9-10.3,15.1-22.3,15.1-34.6c0-12.4-5.3-24.3-15.4-34.3L374.456,293.506z M410.256,398.806 C410.156,398.806,410.156,398.906,410.256,398.806c-3.9,4.2-7.9,8-12.2,12.2c-6.5,6.2-13.1,12.7-19.3,20 c-10.1,10.8-22,15.9-37.6,15.9c-1.5,0-3.1,0-4.6-0.1c-29.7-1.9-57.3-13.5-78-23.4c-56.6-27.4-106.3-66.3-147.6-115.6 c-34.1-41.1-56.9-79.1-72-119.9c-9.3-24.9-12.7-44.3-11.2-62.6c1-11.7,5.5-21.4,13.8-29.7l34.1-34.1c4.9-4.6,10.1-7.1,15.2-7.1 c6.3,0,11.4,3.8,14.6,7c0.1,0.1,0.2,0.2,0.3,0.3c6.1,5.7,11.9,11.6,18,17.9c3.1,3.2,6.3,6.4,9.5,9.7l27.3,27.3 c10.6,10.6,10.6,20.4,0,31c-2.9,2.9-5.7,5.8-8.6,8.6c-8.4,8.6-16.4,16.6-25.1,24.4c-0.2,0.2-0.4,0.3-0.5,0.5 c-8.6,8.6-7,17-5.2,22.7c0.1,0.3,0.2,0.6,0.3,0.9c7.1,17.2,17.1,33.4,32.3,52.7l0.1,0.1c27.6,34,56.7,60.5,88.8,80.8 c4.1,2.6,8.3,4.7,12.3,6.7c3.6,1.8,7,3.5,9.9,5.3c0.4,0.2,0.8,0.5,1.2,0.7c3.4,1.7,6.6,2.5,9.9,2.5c8.3,0,13.5-5.2,15.2-6.9 l34.2-34.2c3.4-3.4,8.8-7.5,15.1-7.5c6.2,0,11.3,3.9,14.4,7.3c0.1,0.1,0.1,0.1,0.2,0.2l55.1,55.1 C420.456,377.706,420.456,388.206,410.256,398.806z"/><path d="M256.056,112.706c26.2,4.4,50,16.8,69,35.8s31.3,42.8,35.8,69c1.1,6.6,6.8,11.2,13.3,11.2c0.8,0,1.5-0.1,2.3-0.2 c7.4-1.2,12.3-8.2,11.1-15.6c-5.4-31.7-20.4-60.6-43.3-83.5s-51.8-37.9-83.5-43.3c-7.4-1.2-14.3,3.7-15.6,11 S248.656,111.506,256.056,112.706z"/><path d="M473.256,209.006c-8.9-52.2-33.5-99.7-71.3-137.5s-85.3-62.4-137.5-71.3c-7.3-1.3-14.2,3.7-15.5,11 c-1.2,7.4,3.7,14.3,11.1,15.6c46.6,7.9,89.1,30,122.9,63.7c33.8,33.8,55.8,76.3,63.7,122.9c1.1,6.6,6.8,11.2,13.3,11.2 c0.8,0,1.5-0.1,2.3-0.2C469.556,223.306,474.556,216.306,473.256,209.006z"/></symbol><symbol id="message" viewBox="0 0 512 512"><title>message</title><path d="M467,80.609H45c-24.813,0-45,20.187-45,45v260.782c0,24.813,20.187,45,45,45h422c24.813,0,45-20.187,45-45V125.609 C512,100.796,491.813,80.609,467,80.609z M461.127,110.609l-6.006,5.001L273.854,266.551c-10.346,8.614-25.364,8.614-35.708,0 L56.879,115.61l-6.006-5.001H461.127z M30,132.267L177.692,255.25L30,353.543V132.267z M467,401.391H45 c-7.248,0-13.31-5.168-14.699-12.011l171.445-114.101l17.204,14.326c10.734,8.938,23.893,13.407,37.051,13.407 c13.158,0,26.316-4.469,37.051-13.407l17.204-14.326l171.444,114.1C480.31,396.224,474.248,401.391,467,401.391z M482,353.543 l-147.692-98.292L482,132.267V353.543z"/></symbol><symbol id="graduation-hat" viewBox="0 0 511.962 511.962"><title>graduation-hat</title><path d="m502.343 177.3-240-104c-4.059-1.759-8.665-1.759-12.724 0l-240 104c-12.824 5.557-12.827 23.804 0 29.361l86.362 37.423v99.896c0 53.832 70.28 96 160 96s160-42.168 160-96v-99.896l16-6.933v170.829c0 8.836 7.164 16 16 16s16-7.164 16-16v-184.695l38.362-16.623c12.824-5.557 12.826-23.804 0-29.362zm-246.362-71.882 199.759 86.563-15.843 6.865-181.932-22.742c-8.769-1.089-16.765 5.124-17.861 13.892s5.124 16.765 13.892 17.861l128.142 16.018-126.157 54.668c-112.857-48.905-88.82-38.489-199.759-86.563zm128 238.563c0 15.075-12.373 30.596-33.947 42.581-51.381 28.545-136.575 28.629-188.106 0-21.574-11.985-33.947-27.506-33.947-42.581v-86.029l121.638 52.71c4.052 1.756 8.657 1.762 12.724 0l121.638-52.71z"/></symbol><symbol id="skill" viewBox="0 0 512 512"><title>skill</title><path d="m386.372 165.925c0-10.2-8.299-18.499-18.499-18.499h-1.242c-1.589 0-2.96-1.085-3.41-2.701-2.133-7.646-5.101-15.084-8.824-22.107-.765-1.442-.544-3.146.551-4.239l.633-.633c7.212-7.213 7.212-18.95 0-26.162l-14.785-14.784c-7.229-7.229-18.932-7.231-26.162 0l-.138.138c-1.12 1.119-2.85 1.325-4.311.509-7.212-4.026-14.878-7.244-22.785-9.564-1.44-.423-2.446-1.793-2.446-3.377 0-10.201-8.298-18.499-18.498-18.499h-20.908c-10.201 0-18.499 8.299-18.499 18.543 0 1.54-1.006 2.91-2.445 3.333-7.908 2.321-15.574 5.539-22.785 9.564-1.46.814-3.192.611-4.32-.518l-.13-.129c-7.223-7.223-18.932-7.231-26.161 0l-14.784 14.783c-7.229 7.229-7.231 18.931 0 26.162l.633.633c1.093 1.094 1.314 2.798.55 4.239-3.723 7.021-6.692 14.459-8.824 22.106-.451 1.616-1.821 2.702-3.41 2.702h-1.243c-10.201 0-18.499 8.299-18.499 18.499v20.907c0 10.201 8.299 18.499 18.499 18.499h2.228c1.538 0 2.897 1.04 3.381 2.589 2.293 7.342 5.37 14.474 9.145 21.197.727 1.295.464 2.97-.639 4.073l-1.821 1.82c-7.229 7.229-7.231 18.931 0 26.162l14.783 14.783c7.228 7.228 18.931 7.232 26.161 0l2.315-2.314c1.078-1.079 2.725-1.357 4.005-.674 6.659 3.551 13.701 6.428 20.93 8.548 1.432.42 2.431 1.813 2.431 3.389v3.346c0 10.2 8.299 18.499 18.499 18.499h20.908c10.2 0 18.498-8.299 18.498-18.499v-3.346c0-1.576 1-2.969 2.431-3.389 7.23-2.121 14.272-4.997 20.93-8.548 1.279-.682 2.927-.405 4.006.675l2.313 2.313c7.228 7.229 18.931 7.231 26.163 0l14.784-14.784c7.212-7.213 7.212-18.949-.001-26.162l-1.82-1.819c-1.103-1.104-1.367-2.78-.641-4.073 3.775-6.721 6.852-13.853 9.147-21.199.483-1.548 1.842-2.588 3.38-2.588h2.228c10.2 0 18.499-8.299 18.499-18.499v-20.905zm-14.999 20.907c0 1.931-1.57 3.501-3.501 3.501h-2.228c-8.135 0-15.248 5.271-17.697 13.115-1.983 6.349-4.643 12.515-7.908 18.326-4.003 7.13-2.723 16.186 3.113 22.024l1.82 1.82c1.365 1.365 1.365 3.586 0 4.951l-14.783 14.783c-1.367 1.367-3.583 1.369-4.952 0l-2.313-2.313c-5.705-5.706-14.617-7.066-21.669-3.303-5.756 3.07-11.844 5.556-18.094 7.39-7.777 2.281-13.208 9.593-13.208 17.781v3.346c0 1.93-1.57 3.5-3.5 3.5h-20.908c-1.931 0-3.501-1.57-3.501-3.5v-3.346c0-8.188-5.432-15.5-13.208-17.781-6.248-1.833-12.335-4.319-18.093-7.39-2.667-1.422-5.599-2.113-8.523-2.113-4.809 0-9.597 1.867-13.145 5.415l-2.315 2.314c-1.366 1.366-3.581 1.368-4.95 0l-14.784-14.783c-1.366-1.367-1.368-3.582 0-4.951l1.821-1.821c5.836-5.836 7.116-14.892 3.112-22.023-3.264-5.813-5.924-11.979-7.907-18.326-2.45-7.845-9.562-13.116-17.697-13.116h-2.228c-1.93 0-3.501-1.57-3.501-3.501v-20.907c0-1.93 1.57-3.5 3.501-3.5h1.243c8.269 0 15.612-5.622 17.857-13.671 1.844-6.61 4.41-13.039 7.629-19.11 3.87-7.3 2.585-16.089-3.196-21.87l-.633-.633c-1.366-1.367-1.368-3.582 0-4.951l14.784-14.784c.892-.892 1.933-1.025 2.474-1.025s1.583.133 2.485 1.035l.129.129c5.821 5.822 14.962 7.056 22.228 3 6.235-3.481 12.863-6.263 19.698-8.269 7.784-2.284 13.22-9.573 13.22-17.769 0-1.931 1.57-3.501 3.501-3.501h20.908c1.93 0 3.5 1.57 3.5 3.545 0 8.151 5.437 15.44 13.222 17.725 6.834 2.005 13.462 4.787 19.698 8.268 7.265 4.055 16.406 2.822 22.228-2.999l.139-.139c1.365-1.366 3.583-1.368 4.95 0l14.784 14.784c1.365 1.365 1.365 3.586 0 4.951l-.632.632c-5.783 5.782-7.067 14.571-3.197 21.871 3.218 6.071 5.786 12.501 7.628 19.11 2.245 8.049 9.588 13.671 17.858 13.671h1.242c1.931 0 3.501 1.57 3.501 3.5v20.908z"/><path d="m256 96.26c-43.25 0-78.437 35.187-78.437 78.437 0 43.311 35.298 78.437 78.437 78.437 43.144 0 78.437-35.132 78.437-78.437 0-43.25-35.187-78.437-78.437-78.437zm0 141.876c-17.739 0-33.792-7.328-45.316-19.104 6.929-10.753 17.429-18.719 29.671-22.424 4.679 2.462 10 3.864 15.645 3.864s10.965-1.401 15.645-3.864c12.243 3.705 22.743 11.671 29.672 22.424-11.525 11.776-27.578 19.104-45.317 19.104zm-18.715-71.379c0-10.319 8.395-18.715 18.715-18.715s18.715 8.395 18.715 18.715c0 10.319-8.396 18.715-18.715 18.715s-18.715-8.395-18.715-18.715zm73.561 39.76c-6.999-9.208-16.188-16.494-26.717-21.204 3.526-5.327 5.586-11.704 5.586-18.556 0-18.59-15.124-33.714-33.714-33.714s-33.714 15.124-33.714 33.714c0 6.852 2.06 13.229 5.585 18.556-10.529 4.71-19.719 11.996-26.718 21.205-5.453-9.362-8.593-20.228-8.593-31.82 0-34.98 28.459-63.439 63.439-63.439s63.438 28.459 63.438 63.439c0 11.592-3.14 22.458-8.592 31.819z"/><path d="m381.263 51.619c-33.873-33.629-78.869-51.966-126.577-51.614-40.215.291-78.124 13.808-109.628 39.09-3.231 2.593-3.748 7.312-1.156 10.543 2.593 3.229 7.312 3.748 10.543 1.155 28.845-23.148 63.545-35.523 100.35-35.789 43.742-.321 84.886 16.467 115.901 47.259 31.02 30.796 48.102 71.827 48.102 115.534 0 37.393-12.329 72.551-35.653 101.675-2.59 3.233-2.068 7.952 1.165 10.542 1.384 1.108 3.039 1.646 4.683 1.646 2.199 0 4.378-.962 5.858-2.812 25.115-31.358 38.946-70.796 38.946-111.051 0-47.734-18.657-92.545-52.534-126.178z"/><path d="m370.942 305.203c-3.34-2.448-8.034-1.728-10.483 1.613-10.254 13.982-18.897 29.084-25.775 44.942h-157.261c-10.179-23.552-24.116-45.067-41.482-64.018-27.38-29.877-42.557-68.659-42.737-109.203-.168-37.868 13.102-74.882 37.368-104.22 2.64-3.192 2.192-7.919-.999-10.558-3.192-2.641-7.919-2.192-10.558.999-26.5 32.041-40.993 72.472-40.809 113.846.196 44.281 16.774 86.638 46.678 119.27 15.624 17.05 28.269 36.327 37.681 57.379-7.727 4.488-12.939 12.851-12.939 22.412 0 7.193 2.949 13.709 7.698 18.407-4.749 4.699-7.698 11.214-7.698 18.407s2.949 13.708 7.698 18.407c-4.749 4.699-7.698 11.214-7.698 18.407 0 14.284 11.622 25.906 25.906 25.906h.477v2.098c0 18.033 14.671 32.704 32.704 32.704h94.576c18.034 0 32.704-14.671 32.704-32.704v-2.098h.477c14.285 0 25.906-11.622 25.906-25.906 0-7.193-2.948-13.708-7.698-18.407 4.749-4.699 7.698-11.214 7.698-18.407s-2.948-13.708-7.698-18.407c4.749-4.699 7.698-11.214 7.698-18.407 0-9.532-5.178-17.872-12.866-22.371 6.253-13.946 13.978-27.243 23.045-39.608 2.449-3.341 1.726-8.034-1.613-10.483zm-49.948 174.093c0 9.763-7.943 17.706-17.706 17.706h-94.576c-9.763 0-17.706-7.943-17.706-17.706v-2.098h129.987v2.098zm-97.818-38.912h113.293c6.014 0 10.907 4.893 10.907 10.907s-4.893 10.907-10.907 10.907h-160.938c-6.014 0-10.907-4.893-10.907-10.907s4.893-10.907 10.907-10.907h12.585c4.142 0 7.499-3.358 7.499-7.499s-3.358-7.499-7.499-7.499h-12.585c-6.014 0-10.907-4.893-10.907-10.907s4.893-10.907 10.907-10.907h160.938c6.014 0 10.907 4.893 10.907 10.907s-4.893 10.907-10.907 10.907h-113.293c-4.142 0-7.499 3.358-7.499 7.499s3.357 7.499 7.499 7.499zm113.293-51.812h-160.938c-6.014 0-10.907-4.893-10.907-10.908 0-5.327 3.841-9.767 8.898-10.714.161-.021.323-.042.484-.074.5-.07 1.007-.12 1.526-.12h160.938c.544 0 1.075.053 1.599.131.167.033.334.055.501.077 5.012.982 8.807 5.404 8.807 10.7-.001 6.015-4.894 10.908-10.908 10.908z"/></symbol></svg>
Here is the CodeSandbox. You can see a box with three dots in which you can replace three dots with svg icons.
So how do I fix this problem?
Next topic
I have done some research on this, it turns out that symbol tag does't work with background-image or content:url. So change symbol tags of svg to g tag except for the outmost one.
Then it turns out to be the next issue, which is all svgs images of the sprite sheet collapsed into one square on the screen( they overlapped each other). So, I give up rendering svg sprite sheet with either background-image or content:url.
I guess there are ways to fix this issue. For now, I will just stick with traditional way to display svg in html. (using '<svg>' and '<use>' tag in html. Or don't use svg sprite sheet, just separate svg sprite sheet into single svg files.)
If you know how to fix this issue. Please let me know.
