Using SVG sprite VS the icons themselves in a React app

0

I am a little stuck on how to use the <svg> and <use> elements in a React component, here is what I am trying to do..

 

import i_bookmark from '../assets/sprite.svg#icon-bookmark'

import i_chat from '../assets/svg/chat.svg'

 

 

const SVG_TEST = () => {

  return (

    <div className="container">

      <svg>

        <use xlinkHref={i_bookmark}></use>

      </svg>

      

      <svg>

        <use xlinkHref={i_chat}></use>

      </svg>

    </div>

  )

}



export default SVG_TEST

Both ways actually aren't working with me, here is the structure of my folders

...

scr 

 |

 +- Components

 |   |

 |    -- myComp.js

 +- assets

    |

    +-- SVG

    |   |

    |   -- chat.svg

    |   -- bookmark.svg

    |

     -- sprite.svg

so how should I use the sprite.svg if i have many svg icons in my SVG folder?

reactjs svg

share|improve this question

asked Nov 21 '18 at 18:22

MoSwilamMoSwilam

11112

add a comment | 

0

I am a little stuck on how to use the <svg> and <use> elements in a React component, here is what I am trying to do..

 

import i_bookmark from '../assets/sprite.svg#icon-bookmark'

import i_chat from '../assets/svg/chat.svg'

 

 

const SVG_TEST = () => {

  return (

    <div className="container">

      <svg>

        <use xlinkHref={i_bookmark}></use>

      </svg>

      

      <svg>

        <use xlinkHref={i_chat}></use>

      </svg>

    </div>

  )

}



export default SVG_TEST

Both ways actually aren't working with me, here is the structure of my folders

...

scr 

 |

 +- Components

 |   |

 |    -- myComp.js

 +- assets

    |

    +-- SVG

    |   |

    |   -- chat.svg

    |   -- bookmark.svg

    |

     -- sprite.svg

so how should I use the sprite.svg if i have many svg icons in my SVG folder?

reactjs svg

share|improve this question

asked Nov 21 '18 at 18:22

MoSwilamMoSwilam

11112

add a comment | 

0

0

0

I am a little stuck on how to use the <svg> and <use> elements in a React component, here is what I am trying to do..

 

import i_bookmark from '../assets/sprite.svg#icon-bookmark'

import i_chat from '../assets/svg/chat.svg'

 

 

const SVG_TEST = () => {

  return (

    <div className="container">

      <svg>

        <use xlinkHref={i_bookmark}></use>

      </svg>

      

      <svg>

        <use xlinkHref={i_chat}></use>

      </svg>

    </div>

  )

}



export default SVG_TEST

Both ways actually aren't working with me, here is the structure of my folders

...

scr 

 |

 +- Components

 |   |

 |    -- myComp.js

 +- assets

    |

    +-- SVG

    |   |

    |   -- chat.svg

    |   -- bookmark.svg

    |

     -- sprite.svg

so how should I use the sprite.svg if i have many svg icons in my SVG folder?

reactjs svg

share|improve this question

asked Nov 21 '18 at 18:22

MoSwilamMoSwilam

11112

I am a little stuck on how to use the <svg> and <use> elements in a React component, here is what I am trying to do..

 

import i_bookmark from '../assets/sprite.svg#icon-bookmark'

import i_chat from '../assets/svg/chat.svg'

 

 

const SVG_TEST = () => {

  return (

    <div className="container">

      <svg>

        <use xlinkHref={i_bookmark}></use>

      </svg>

      

      <svg>

        <use xlinkHref={i_chat}></use>

      </svg>

    </div>

  )

}



export default SVG_TEST

Both ways actually aren't working with me, here is the structure of my folders

...

scr 

 |

 +- Components

 |   |

 |    -- myComp.js

 +- assets

    |

    +-- SVG

    |   |

    |   -- chat.svg

    |   -- bookmark.svg

    |

     -- sprite.svg

so how should I use the sprite.svg if i have many svg icons in my SVG folder?

 

import i_bookmark from '../assets/sprite.svg#icon-bookmark'

import i_chat from '../assets/svg/chat.svg'

 

 

const SVG_TEST = () => {

  return (

    <div className="container">

      <svg>

        <use xlinkHref={i_bookmark}></use>

      </svg>

      

      <svg>

        <use xlinkHref={i_chat}></use>

      </svg>

    </div>

  )

}



export default SVG_TEST

 

import i_bookmark from '../assets/sprite.svg#icon-bookmark'

import i_chat from '../assets/svg/chat.svg'

 

 

const SVG_TEST = () => {

  return (

    <div className="container">

      <svg>

        <use xlinkHref={i_bookmark}></use>

      </svg>

      

      <svg>

        <use xlinkHref={i_chat}></use>

      </svg>

    </div>

  )

}



export default SVG_TEST

...

scr 

 |

 +- Components

 |   |

 |    -- myComp.js

 +- assets

    |

    +-- SVG

    |   |

    |   -- chat.svg

    |   -- bookmark.svg

    |

     -- sprite.svg

...

scr 

 |

 +- Components

 |   |

 |    -- myComp.js

 +- assets

    |

    +-- SVG

    |   |

    |   -- chat.svg

    |   -- bookmark.svg

    |

     -- sprite.svg

reactjs svg

reactjs svg

share|improve this question

asked Nov 21 '18 at 18:22

MoSwilamMoSwilam

11112

share|improve this question

asked Nov 21 '18 at 18:22

MoSwilamMoSwilam

11112

share|improve this question

share|improve this question

asked Nov 21 '18 at 18:22

MoSwilamMoSwilam

11112

asked Nov 21 '18 at 18:22

MoSwilamMoSwilam

11112

asked Nov 21 '18 at 18:22

MoSwilamMoSwilam

11112

11112

add a comment | 

add a comment | 

0

active

oldest

votes

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});

Thanks for contributing an answer to Stack Overflow!

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.


• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53418341%2fusing-svg-sprite-vs-the-icons-themselves-in-a-react-app%23new-answer', 'question_page');
}
);

Post as a guest

Name

Email

Required, but never shown

0

active

oldest

votes

0

active

oldest

votes

active

oldest

votes

active

oldest

votes

Thanks for contributing an answer to Stack Overflow!

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.


• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.


• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53418341%2fusing-svg-sprite-vs-the-icons-themselves-in-a-react-app%23new-answer', 'question_page');
}
);

Post as a guest

Name

Email

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

Name

Name

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Name

Name

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

This page is only for reference, If you need detailed information, please check here