Using SVG sprite VS the icons themselves in a React app

up vote
0
down vote

favorite

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?

asked Nov 21 at 18:22

MoSwilam

538

add a comment |

up vote
0
down vote

favorite

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?

asked Nov 21 at 18:22

MoSwilam

538

add a comment |

up vote
0
down vote

favorite

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?

asked Nov 21 at 18:22

MoSwilam

538

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

asked Nov 21 at 18:22

MoSwilam

538

asked Nov 21 at 18:22

MoSwilam

538

asked Nov 21 at 18:22

MoSwilam

538

asked Nov 21 at 18:22

MoSwilam

538

asked Nov 21 at 18:22

MoSwilam

538

add a comment |

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',
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
});

}
});

draft saved

draft discarded

Sign up or log in

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

Post as a guest

Name

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

Required, but never shown

active

oldest

votes

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.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

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');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

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

Post as a guest

Name

Required, but never shown

Sign up or log in

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

Post as a guest

Name

Required, but never shown

Sign up or log in

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

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

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

搜尋此網誌

Btukfyl