In data file there are arrary of objects and the icons descriptions is introduced like objects properties values. So how to use these icons as links?
export const socialLinks = [
{
url: "https://www.youtube.com",
icon: `<svg width="22" height="17" viewBox="0 0 22 17" fill="none" xmlns="http://www.w3.org/2000/svg">n<path d="M15.0919 8.19985L7.97454 12.6615V3.73175L15.0919 8.19985ZM21.7323 12.3391V4.03479C21.7323 4.03479 21.7323 0.0373535 17.9895 0.0373535H3.74278C3.74278 0.0373535 0 0.0373535 0 4.03479V12.3391C0 12.3391 0 16.3366 3.74278 16.3366H17.9895C17.9895 16.3366 21.7323 16.3366 21.7323 12.3391Z" fill="white"/>n</svg>n`,
name: "Social Icon - Youtube",
_id: "1915c699-49fe-401c-b86d-927051886915"
},
{
url: "https://www.facebook.com",
icon: `<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">n<path d="M17.4149 0.358154H1.70714C1.16859 0.358154 0.7323 0.794441 0.7323 1.333V17.0415C0.7323 17.5794 1.16859 18.0157 1.70714 18.0157H10.1643V11.1778H7.86298V8.51297H10.1643V6.54784C10.1643 4.26708 11.5571 3.02517 13.5921 3.02517C14.5669 3.02517 15.4042 3.09801 15.6484 3.13038V5.51414L14.2373 5.51487C13.1308 5.51487 12.9167 6.04092 12.9167 6.81196V8.5137H15.5557L15.2122 11.1785H12.9167V18.0157H17.4164C17.9535 18.0157 18.3898 17.5794 18.3898 17.0408V1.333C18.3898 0.794441 17.9535 0.358154 17.4149 0.358154Z" fill="white"/>n</svg>n`,
name: "Social Icon - Facebook",
_id: "cb00d275-865f-4820-8d5f-2d871c604288"
},
{
url: "http://twitter.com",
icon: `<svg width="22" height="18" viewBox="0 0 22 18" fill="none" xmlns="http://www.w3.org/2000/svg">n<path fill-rule="evenodd" clip-rule="evenodd" d="M21.1223 2.75569C20.352 3.09178 19.5398 3.32276 18.6786 3.42786C19.5538 2.89563 20.226 2.06244 20.5482 1.07526C19.7289 1.55846 18.8117 1.91548 17.8455 2.10445C17.0682 1.27844 15.9619 0.760254 14.7435 0.760254C12.3909 0.760254 10.4864 2.66464 10.4864 5.01739C10.4864 5.34645 10.5214 5.67551 10.5984 5.98349C7.06245 5.80857 3.9257 4.11409 1.83219 1.53738C1.46097 2.16754 1.25091 2.89563 1.25091 3.67993C1.25091 5.1503 2.00023 6.45966 3.1414 7.22288C2.44829 7.19492 1.79017 7.00595 1.21593 6.69065C1.21593 6.7047 1.21593 6.72578 1.21593 6.73968C1.21593 8.80538 2.68631 10.5207 4.63285 10.9128C4.27583 11.0109 3.89774 11.067 3.51261 11.067C3.23947 11.067 2.9735 11.0388 2.71441 10.9898C3.25352 12.6774 4.82183 13.9098 6.6845 13.9377C5.22803 15.0791 3.39346 15.7651 1.40491 15.7651C1.06179 15.7651 0.71883 15.7372 0.389771 15.7022C2.27322 16.9135 4.50682 17.6136 6.90846 17.6136C14.7365 17.6136 19.0147 11.1299 19.0147 5.51449C19.0147 5.32537 19.0077 5.14328 19.0007 4.96133C19.8268 4.35913 20.5482 3.60981 21.1223 2.75569Z" fill="white"/>n</svg>n`,
name: "Social Icon - Twitter",
_id: "a9306eb2-66a8-4a15-844c-a53522f33c4a"
},
{
url: "https://www.instagram.com",
icon: `<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">n<path d="M15.7844 5.42693C16.1593 5.42693 16.4631 5.12548 16.4631 4.75363C16.4631 4.38177 16.1593 4.08032 15.7844 4.08032C15.4096 4.08032 15.1057 4.38177 15.1057 4.75363C15.1057 5.12548 15.4096 5.42693 15.7844 5.42693Z" fill="white"/>n<path d="M10.3081 5.13208C7.49521 5.13208 5.2146 7.39519 5.2146 10.1865C5.2146 12.9778 7.49521 15.2409 10.3081 15.2409C13.121 15.2409 15.4016 12.9778 15.4016 10.1865C15.4016 7.39519 13.121 5.13208 10.3081 5.13208ZM10.3081 13.3455C8.55339 13.3455 7.12466 11.9278 7.12466 10.1865C7.12466 8.44398 8.55339 7.02748 10.3081 7.02748C12.0628 7.02748 13.4916 8.44398 13.4916 10.1865C13.4916 11.9278 12.0628 13.3455 10.3081 13.3455Z" fill="white"/>n<path d="M14.1294 0.0783691H6.48919C2.9734 0.0783691 0.122314 2.90753 0.122314 6.39628V13.9778C0.122314 17.4665 2.9734 20.2957 6.48919 20.2957H14.1294C17.6452 20.2957 20.4963 17.4665 20.4963 13.9778V6.39628C20.4963 2.90753 17.6452 0.0783691 14.1294 0.0783691ZM18.5863 13.9778C18.5863 16.4165 16.5871 18.4003 14.1294 18.4003H6.48919C4.03157 18.4003 2.03237 16.4165 2.03237 13.9778V6.39628C2.03237 3.95757 4.03157 1.97374 6.48919 1.97374H14.1294C16.5871 1.97374 18.5863 3.95757 18.5863 6.39628V13.9778Z" fill="white"/>n</svg>n`,
name: "Social Icon - Instagram",
_id: "c10c86f8-9de1-43d3-b6e4-59e363be9177"
},
{
url: "https://www.linkedin.com",
icon: `<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">n<path d="M16.6258 0H4.74092C2.39706 0 0.496338 1.90073 0.496338 4.24459V16.1294C0.496338 18.4733 2.39706 20.374 4.74092 20.374H16.6258C18.9705 20.374 20.8704 18.4733 20.8704 16.1294V4.24459C20.8704 1.90073 18.9705 0 16.6258 0ZM7.28767 16.1294H4.74092V6.79134H7.28767V16.1294ZM6.01429 5.71491C5.19424 5.71491 4.52869 5.04426 4.52869 4.21742C4.52869 3.39057 5.19424 2.71993 6.01429 2.71993C6.83435 2.71993 7.4999 3.39057 7.4999 4.21742C7.4999 5.04426 6.8352 5.71491 6.01429 5.71491ZM17.4747 16.1294H14.9279V11.3721C14.9279 8.51294 11.5323 8.72941 11.5323 11.3721V16.1294H8.9855V6.79134H11.5323V8.28967C12.7174 6.09438 17.4747 5.93223 17.4747 10.3916V16.1294Z" fill="white"/>n</svg>n`,
name: "Social Icon - LinkedIn",
_id: "1531fd94-d4cc-4022-93e1-d20da9e76910"
}
];
tryed like that, but the icons are not loading
function SocialLinks({ socialLinks }) {
const socialLinksArray = Object.values(socialLinks);
const [youtube, facebook, twitter, instagram, linkedIn] = socialLinksArray;
<div className="social-media">
<a href={youtube.url}><img src={youtube.icon}/></a>
<a href={facebook.url}><img src={facebook.icon}/></a>
<a href={twitter.url}><img src={twitter.icon}/></a>
<a href={instagram.url}><img src={instagram.icon}/></a>
<a href={linkedin.url}><img src={linkedin.icon}/></a>
</div>
Advertisement
Answer
First of all, your SVG files are invalid, you can check the 3rd icon below, which I have replaced with a valid one.
export function App() {
const arr = [
{
name: "youtube",
url: "youtube.com",
icon: `<svg width="99" height="20" viewBox="0 0 99 20">//invalid
<path d="M35.0349/>
<path d="M41.8677/>
<path d="M46.9968/>
</svg>`
},
{
name: "twitter",
url: "twitter.com",
icon: `<svg width="99" height="20" viewBox="0 0 99 20">//invalid
<path d="M35.0349/>
<path d="M41.8677/>
<path d="M46.9968/>
</svg>`
},
{
name: "instagram",
url: "instagram.com",
icon: `<svg width="99" height="20" viewBox="0 0 99 20">//invalid
<path d="M35.0349/>
<path d="M41.8677/>
<path d="M46.9968/>
</svg>`
},
{
name: "linkedin",
url: "linkedin.com",
icon: `<svg width="640px" height="640px" viewBox="0 -64 640 640" xmlns="http://www.w3.org/2000/svg"><path d="M490 296.9C480.51 239.51 450.51 64 392.3 64c-14 0-26.49 5.93-37 14a58.21 58.21 0 0 1-70.58 0c-10.51-8-23-14-37-14-58.2 0-88.2 175.47-97.71 232.88C188.81 309.47 243.73 320 320 320s131.23-10.51 170-23.1zm142.9-37.18a16 16 0 0 0-19.75 1.5c-1 .9-101.27 90.78-293.16 90.78-190.82 0-292.22-89.94-293.24-90.84A16 16 0 0 0 1 278.53C1.73 280.55 78.32 480 320 480s318.27-199.45 319-201.47a16 16 0 0 0-6.09-18.81z"/></svg>`
}
];
return (
<div className="icons">
{arr.map((array, i) => (
<div
style={{ display: "flex" }}
key={i}
dangerouslySetInnerHTML={{ __html: array.icon }}
></div>
))}
</div>
);
}