svg-sprite

问题 I am using React, and I am trying to load a svg icon from a sprite. My sprite is like this: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <symbol viewBox="0 0 28.3 28.3" id="square"> <path d="M.3 30.7h27L13.8 3.8zM126.3-51.7c-8.8 0-16 7.2-16 16s7.2 16 16 16 16-7.2 16-16-7.2-16-16-16z" /> <path d="M0 28.3h28.3L14.2 0 0 28.3zm5.3-3.2l8.9-17.7L23 25.1H5.3z" /> </symbol> <symbol viewBox="0 0 28.3 28.3" id="circle"> <circle cx="14.2" cy="14.2" r="14.2"

问题 I am building an Angular application (Angular 4/5/6) and would like to use SVG sprites in my component template. Question: Assuming I already have my SVG icon sprite generated ( icons.svg ), how can I get Angular to inject/import my SVG icon sprite into my component's template? Is there a way to inject/import my SVG icon sprite into my component without having to use any 3rd party modules/directives and do it natively with Angular itself? Background/Issue: As discussed in this article, icons

问题 I am having a problem creating a snapshot test with Jest and Enzyme on a component using SVG sprites. I am using the package svg-sprite-loader: https://github.com/kisenka/svg-sprite-loader Here is the component that's giving it trouble: import React from 'react'; import dieIcons from '../../public/images/dieIcons.svg'; const DieIcon = (props) => ( <svg className={`die__icon icon-${props.name}`} onMouseDown={props.onMouseDown} onMouseUp={props.onMouseUp} onMouseOut={props.onMouseOut}> <use

问题 I have an angular2 project which was created via angular-cli. In webpack there is a loader to load the svg sprite and also to generate that sprite from list of svgs. But how do I can use this functionality in my current project when angular-cli doesn't allow me to change webpack.config? Thanks. 回答1: Use svg-sprite 1. npm install --save-dev svg-sprite 2. Put your svgs in src/svgs 3. Add sprite-config.json to your project root { "dest": "src/", "mode": { "css": { "dest": "sprites", "render": {