I have a Vue Cli 3 project and I am trying to use vue-svgicon npm package I have followed all the steps in this tutorial: https://markus.oberlehner.net/blog/dynamically-loading-svg-icons-with-vue/
but when I come to inspect the expected svg element it is not displaying in the DOM despite being present in the inspector in Google Chrome - any help is appreciated.
<svg version="1.1" viewBox="0 0 16 16" class="svg-icon svg-fill"
style="height: 3em;"></svg>
I installed vue-svgicon via npm then ran the script to parse the svg into javascript. Then:
import App from './App.vue';
import router from './router';
import store from './store';
import './styles/global.scss';
import * as svgicon from 'vue-svgicon';
Vue.use(svgicon);
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
Then in the component I wanted to add the SVG I added the following:
<template>
<div>
<svgicon name="bin" height="3em"></svgicon>
</template>
<script>
export default {
}
</script>
<style lang="scss">
#import "../styles/home.scss";
</style>
Related
i have problem with importing SVG to my NextJS website.
I've tried using <Image /> tag, <img /> tag too and <svg> tag also.
Webstorm sees the image, but browser doesn't.
code:
import Logo from "../public/file.svg"
const Navbar = () => {
return (
<div>
<nav>
<div>
<Image src={Logo} alt="logo" height={50} width={50}/>
I had a problem like this. The problem was gone when I replaced the imported .svg file and placed the URL directly in the Image. like this:
const Navbar = () => {
return (
//...
<Image src="/file.svg" alt="logo" height="50px" width="50px"/>
);
}
Notice that with this method, you start your URL with a / from public folder and should not include ../public itslef.
Since the last 72 hours, I have lost my mind trying to figure this out.
All I want to do is use my vectors from illustrator and display them on my react-native app.
I tried a few libraries like react-native-vector-icons used icomoon followed steps, no result.
Please guide me a perfect solution to this issue. I have no web developer experience, all I know is Javascript and react-native and illustrator.
// Code
import React, {Component} from "react";
import {View, Text} from "react-native";
import {Font} from "expo";
import {createIconSetFromIcoMoon} from "react-native-vector-icons";
import icoMoonConfig from "../selection.json";
const Icon = createIconSetFromIcoMoon(icoMoonConfig);
Expo.Font.loadAsync("icomoon", require("../assets/fonts/icomoon.ttf"));
export default class INITIATE extends React.Component {
async componentDidMount() {
await Font.loadAsync("icomoon",
require("../assets/fonts/icomoon.ttf"));
this.setState({fontLoaded: true});
}
state = {
fontLoaded: true
};
render() {
return (
<View style={{
flex: 1, justifyContent: "center", alignItems:
"center"
}}>
{this.state.fontLoaded ? <Icon/> : null}
</View>
);
}
}
// The screen renders blank
React Native is for Android and iOS apps and React JS is for web development.
In React, import the SVG image first:
import sampleSvg from 'imgPath/sample.svg';
Then load it with:
<img src={sampleSvg} alt="A Sample SVG Image" />
For React Native, there's a similar question with an answer using webView.
Or try react-native-svg-uri
Hope it can help!
Using SVG icons with React is pretty simple.
Create an Icon component.
import IcoMoon from "react-icomoon";
import { Svg, Path } from "react-native-svg";
const iconSet = require("./selection.json");
const Icon = (props) => (
<IcoMoon
native
SvgComponent={Svg}
PathComponent={Path}
iconSet={iconSet}
{...props}
/>
);
export default Icon;
Import and use anywhere.
import Icon from "./icon";
<Icon icon="pencil" size={20} color="orange" />;
For more information: react-icomoon
TLDR:
Is there a way to force-append an attribute to a react tag?
.
The full story:
I'm using reactjs and i've run into a problem with SVG and foreignObjects.
I wanted to center text in an SVG image so i figured the easiest approach would be to use a div in a foreign object.
It works fine on chrome, but in firefox the text isn't displayed.
On closer inspection, it appears that my
requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"
requiredExtensions="http://www.w3.org/1999/xhtml"
xmlns="http://www.w3.org/2000/svg"
Isn't coming through to the browser.
I've read the reactjs docs which suggested putting the prefix
data-
in, but the prefix stays in the browser.
I also tried to set the required features using the style={...}, but then this was inside the style string and not inserted as a tag attribute.
React Code:
import React, {Component,PropTypes} from 'react';
export default class myComponent extends Component {
render() {
return (<svg width = {this.props.width}
height = {this.props.height}>
<foreignObject x = {0} y = {0}
width = {this.props.width}>
<div> <p> {this.props.title} </p> </div > </foreignObject>
</svg>)
}
PARTIAL ANSWER:
I haven't been able to get text in a foreignObject to work with react in firefox, but i did work out how to set 'arbitary' tag attributes.
For each of the react components i assigned refs, i.e.:
<div style={divStyle} ref="d2">
<p style={{wordWrap: 'normal', textAlign: 'left', margin: 'auto', position: 'relative'}} key="p2">
{Math.round(this.props.kW)} W
</p>
</div>
Then in componentdidmount:
componentDidMount() {
this.refs.svg1.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
this.refs.svg1.setAttribute('version', '1.2');
this.refs.fo1.setAttribute('requiredExtensions', 'http://example.com/SVGExtensions/EmbeddedXHTML');
this.refs.d1.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml');
this.refs.fo2.setAttribute('requiredExtensions', 'http://example.com/SVGExtensions/EmbeddedXHTML');
this.refs.d2.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml');
this.refs.fo3.setAttribute('requiredExtensions', 'http://example.com/SVGExtensions/EmbeddedXHTML');
this.refs.d3.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml');
this.refs.fo4.setAttribute('requiredExtensions', 'http://example.com/SVGExtensions/EmbeddedXHTML');
this.refs.d4.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml');
this.refs.fo5.setAttribute('requiredExtensions', 'http://example.com/SVGExtensions/EmbeddedXHTML');
this.refs.d5.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml');
this.refs.fo6.setAttribute('requiredExtensions', 'http://example.com/SVGExtensions/EmbeddedXHTML');
this.refs.d6.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml');
}
This actually broke the foreign object in BOTH chrome and firefox!!
I think the issue is that i'm going by
https://www.w3.org/TR/SVG/extend.html
and they have:
<body xmlns="http://www.w3.org/1999/xhtml">
<p>Here is a paragraph that requires word wrap</p>
</body>
But since you can't use the <body> tag inside a react component, this doesn't get rendered.
I will manually edit the code in firefox and see if the inclusion of <body> in the foreign object fixes this issue.
I think the only option I have is to layer a second SVG component over the top of the first then use setInnerHTMLDangerously to write all of the foreign objects inside. Such a filthy hack!!
My goal is to convert code from Angular 1.3 to Angular 2 (with SVG in both cases).
I tried the following simple test code, which works in case #1 that does not involve interpolation, but does not work in case #2 (which uses interpolation), and AFAICS the only difference in the generated SVG code is the inclusion of an extra attribute in the element: class="ng-binding"
Is there a way to suppress the preceding class attribute, or is there another solution?
Btw I wasn't able to get the formatting quite right (my apologies).
Contents of HTML Web page:
<html>
<head>
<title>SVG and Angular2</title>
<script src="quickstart/dist/es6-shim.js"></script>
</head>
<body>
<!-- The app component created in svg1.es6 -->
<my-svg></my-svg>
<script>
// Rewrite the paths to load the files
System.paths = {
'angular2/*':'/quickstart/angular2/*.js', // Angular
'rtts_assert/*': '/quickstart/rtts_assert/*.js', // Runtime assertions
'svg': 'svg1.es6' // The my-svg component
};
System.import('svg');
</script>
</body>
</html>
Contents of the JS file:
import {Component, Template, bootstrap} from 'angular2/angular2';
#Component({
selector: 'my-svg'
})
#Template({
//case 1 works:
inline: '<svg><ellipse cx="100" cy="100" rx="80" ry="50" fill="red"></ellipse></svg>'
//case 2 does not work:
//inline: "<svg>{{graphics}}</svg>"
})
class MyAppComponent {
constructor() {
this.graphics = this.getGraphics();
}
getGraphics() {
// return an array of SVG elements (eventually...)
var ell1 =
'<ellipse cx="100" cy="100" rx="80" ry="50" fill="red"></ellipse>';
return ell1;
}
}
bootstrap(MyAppComponent);
SVG elements do not use the same namespace as HTML elements. When you insert SVG elements into the DOM, they need to be inserted with the correct SVG namespace.
Case 1 works because you are inserting the whole SVG, including the <svg> tags, into the HTML. The browser will automatically use the right namespace because it sees the <svg> tag and knows what to do.
Case 2 doesn't work because you are just inserting an <ellipse> tag and the browser doesn't realise it is supposed be created with the svg namespace.
If you inspect both SVGs with the browser's DOM inspector, and look at the <ellipse> tag's namespace property, you should see the difference.
You can use outerHtml of an HTML element like:
#Component({
selector: 'my-app',
template: `
<!--
<svg xmlns='http://www.w3.org/2000/svg'><ellipse cx="100" cy="100" rx="80" ry="50" fill="red"></ellipse></svg>
-->
<span [outerHTML]="graphics"></span>`
})
export class App {
constructor() {
this.graphics = this.getGraphics();
}
getGraphics() {
// return an array of SVG elements (eventually...)
var ell1 =
'<svg><ellipse cx="100" cy="100" rx="80" ry="50" fill="red"></ellipse></svg>';
return ell1;
}
}
note that the added string has to contain the <svg>...</svg>
See also How can I add a SVG graphic dynamically using javascript or jquery?
I’m working on an Angular 2 app and I have a component which inclundes a simple SVG rectangle, I’m trying to use Hammer.js library to be able to deplace and reform this SVG rectangle inside the view of my component,
therefore I’ve done those steps:
I’ve downloaded and copied 3 files to my project repository
hammer.js
hammer.min.js
hammer.min.map
I’ve added this script tag to my index head:
<script src="dev/jqueryLibs/hammer/hammer.js" type="text/javascript"></script>
And I get this error in the console:
Uncaught TypeError: Cannot read property 'addEventListener' of null
I’ve tried to import it in my component and add reference betwen the methode and the svg element, like this:
TS.File contents:
import {Component, ElementRef, AfterViewInit } from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
import {FORM_DIRECTIVES} from "angular2/common";
#Component({
selector: 'content',
templateUrl: 'content.component.html',
styleUrls: ['content.component.css'],
directives: [FORM_DIRECTIVES],
})
export class ContentComponent implements AfterViewInit{
static hammerInitialized = false;
constructor(private el:ElementRef)
{}
ngAfterViewInit() {
console.log('in ngAfterViewInit');
if (!ContentComponent.hammerInitialized) {
console.log('hammer not initialised');
var myElement = document.getElementById('test1');
var hammertime = new Hammer(myElement);
hammertime.on('swiperight', function(ev) {
console.log('caught swipe right');
console.log(ev);
});
ContentComponent.hammerInitialized = true;
} else {
console.log('hammer already initialised');
}
}
View file contents:
<svg class="simulation">
<rect id="test1" x="20" y="500" height="150" width="200" style="stroke:#EC9A20;stroke-width: 15; fill: none"/>
</svg>
Therefore I still am not able to move my SVG rectangle and it seems that Hammer.js is not even running according to this console message:
hammer not initialised
Anybody can tell me where is the error or what should I do?
This was resolved: The script tag of hammer declaration
must be placed after the jquery-ui library declaration in HTML file.
<script src="./dev/resources/js/jquery.js"></script>
<script src="./dev/resources/js/jquery-ui.js"></script>
<script src="./dev/jqueryLibs/jquery-1.12.1.min.js"></script>
<script src="./dev/jqueryLibs/jquery-migrate-1.2.1.min.js"></script>
<!--importer ici la js de bootstrap-->
<script src="node_modules/bootstrap/dist/js/bootstrap.js"></script>
<!--Importer ici hammer.js-->
<script src="dev/jqueryLibs/hammer/hammer.js" type="text/javascript"></script>