I currently have a css file which cuts out different images with different dimension from an image file.
sprite.css
sprite
{
background:url(/app/images/sprite.png) no-repeat top left;
width:25px;
height:25px;
float:left
}
.sprite.followed
{
background-position:0 0
}
.sprite.feedback
{
background-position:0 -35px
}
.sprite.content_share
{
background-position:0 -70px
}
.sprite.become_fan
{
background-position:0 -105px
}
.sprite.articleread
{
background-position:0 -140px
}
.sprite.voting
{
background-position:0 -175px
}
.sprite.visits
{
background-position:0 -210px
}
.sprite.star_rate
{
background-position:0 -245px;
width:24px;
height:24px
}
.sprite.yvideo
{
background-position:0 -279px
}
.sprite.whatsapp
{
background-position:0 -314px
}
.sprite.tweet
{
background-position:0 -349px
}
.sprite.share
{
background-position:0 -384px
}
.sprite.review_live
{
background-position:0 -419px
}
.sprite.review_like
{
background-position:0 -454px
}
.sprite.message
{
background-position:0 -489px
}
.sprite.like
{
background-position:0 -524px
}
.sprite.sync
{
background-position:0 -559px
}
I'm loading the above mentioned in a js file mentioned below.
import React from 'react';
import ReactDOM from 'react-dom';
import { Col } from 'react-bootstrap';
import '../../css/sprite.css';
const ActionListArray = React.createClass({
render() {
var fontFamily = this.props.fontFamily;
var fontSize = this.props.fontSize;
var coinName = this.props.coinName;
var actionListArray = this.props.data.map(function(text, index){
return <Col xs={12} md={6} key={index} style={fontSize}><div style={fontFamily}><div className={text.sprite}></div>{text.shortText} = {text.value} {coinName}(s)</div></Col>;
});
return (<div>{actionListArray}</div>);
}
});
export default ActionListArray;
text.sprite contains the class names mentioned in the css file.
My problem -> When I run it, the div is generated with the class name but no image appears in the div.
What might be the issue? Any other way of fetching it in the js file?
Constraints ->
Since, I have to port the project into reactjs, I have been provided a css file which contains the icons. I now have to include it in the ported Reactjs project. So, is there any other way which doesn't require a change of the css file?
If no, then please mention the best method
EDIT 1
This is my console
My Directory is
app
components
tabsContent
ActionListArray.js
css
sprite.css
images
sprite.png
EDIT 2 Apparently, there was a need of a fiddle. Here's a sample implying the same code.
