Comments (4)
I'd be happy to accept a PR for this.
An aside, I do wonder if this should be converted to be a component with tagName: 'svg'
using positional parameters vs a helper then we'd get all this stuff for free?
from ember-inline-svg.
Converting it into a component seems like a cool idea. Would be happy to play around with this over the weekend, if no one else is working on it.
from ember-inline-svg.
A couple of questions, regarding converting this into a component.
I understand we'd use the component tagName property and strip the tag, but then we would need to add back all the attributes that were specified on the tag, wouldn't we? What would be the best way to go about this?
from ember-inline-svg.
I played around with this and here's a hacky version that works....
export default Ember.Component.extend({
attributeBindings: ['style'],
tagName: 'svg',
path: null,
content: null,
init() {
this._super(...arguments);
let path = this.get('path');
var jsonPath = dottify(path);
var svg = Ember.get(SVGs, jsonPath);
if (typeof svg === "undefined" && /\.svg$/.test(path)) {
svg = Ember.get(SVGs, jsonPath.slice(0, -4));
}
Ember.assert("No SVG found for "+path, svg);
let attrs = Ember.$(svg)[0].attributes;
for (var i = 0; i < attrs.length; i++) {
//push attribute name in to attr binding array
this.get('attributeBindings').push(attrs[i].name);
//set attribute as a prop
this.set(attrs[i].name, attrs[i].value);
}
//set the contents of the svg to a prop and use that in the template
this.set('content', Ember.String.htmlSafe(Ember.$(svg).html()));
}
}).reopenClass({
positionalParams: ['path']
});
Can you let me know what changes i need to make, so that i can send a pr...
I'm also on the fence about how we should handle attribute bindings...do I explicitly specify everything like I've done for the style
attribute ?
from ember-inline-svg.
Related Issues (20)
- htmlSafe import is causing error in production build HOT 2
- Upgrade Ember.js tracking plan
- Assertion Failed: No SVG found in production / staging HOT 3
- Babel Deoptimization HOT 1
- Feature Request: Co-locate SVGs within pods HOT 2
- Passing a class to the inline-svg helper overwrites existing classes on the SVG element HOT 1
- Cannot read property 'filter' of undefined
- Fails to find SVG's imported with ember-cli-node-assets addon
- Silently fails with fingerprinted SVGs HOT 4
- Pull from Absolute Path
- Option to receive an action
- Deprecation Warning when updating to ember 2.18.2
- Update SVGO HOT 2
- Would like an option to override the default JS outputFile (currently, 'svgs.js')
- High and Moderate security issues found in yarn audit HOT 1
- Huge number of security issues found in ember-inline-svg HOT 1
- Why is viewBox property removed from svg file? HOT 1
- Convert to component? HOT 2
- SVGs should be bundled to vendor.js instead of app.js
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ember-inline-svg.