I'm using the program DiceBear to generate an avatar using .svg files.
The program pulls .svg files from a library and layers them on top of eachother using a createAvatar function.
How could it be written so the end result is rasterized into a single png?
import { createAvatar } from '#dicebear/avatars';
import * as style from '#dicebear/avatars-male-sprites';
import * as React from 'react';
import SVG from 'react-inlinesvg';
import Layout from '#/components/layout/Layout';
import Seo from '#/components/Seo';
export default function HomePage() {
const svg = createAvatar(style);
console.log(svg);
return (
<Layout>
<Seo />
<main>
<section className='bg-dark'>
<div className='flex flex-col items-center justify-center min-h-screen text-center text-white layout'>
<SVG src={svg} />
</div>
</section>
</main>
</Layout>
);
}
Related
Hello I need a small help I want to hide button background and I am unable to apply flex which wraps the items contained in a container in which it is applied into single line
My html code:
import {
GlobeIcon,
HomeIcon
}from '#heroicons/react/outline'
function Sidebar(){
return (
<div>
<button className='flex items-center space-x-2 hover:text-white'>
<HomeIcon className = 'h-5 w- 5'/>
<p1>Home</p1>
</button>
<button className='flex items-center space-x-2 hover:text-white'>
<GlobeIcon className = 'h-5 w- 5'/>
<p1>Explore</p1>
</button>
</div>
)
}
export default Sidebar;
I want my page to look like
But my actual page is shwing like
Anybody could help me with it
import React from 'react';
import Navigation from "../components/Nagivation";
const Home = () => {
return (
<div className="home">
<Navigation/>
<div className="homeContent">
<div className="content">
<div className="pdf">
CV Download
</div>
</div>
</div>
</div>
);
};
export default Home;
The file is into app/public/media/AA.pdf
locally it works very fine, App.pdf is open. But on the AWS server, it doesn't. It opens www.aaaa.com/media/AA.pdf but error the page doesn't exist.
Added download attribute
CV Download
VS says I have no issues but all my browsers say it is un-defined.. All input is appreciated.
import React from 'react';
import "./Post.css";
import{Avatar} from '#material-ui/core';
function Post({ pofilePic, image, username, timestamp,message}) {
return (
<div className="post">
<div className="post__top">
<Avatar src={profilePic}
className="post__avatar"/>
<div className="post__topInfo">
<h3>{username}</h3>
<p>Timesatmp....</p>
</div>
</div>
```
It’s spelled pofilePic in one place and profilePic in another.
I'm trying to render an html file to pdf however while the pdf functionality is working fine the rendering is working properly, no css. Also it renders the whole page, how can i render specific sections of the html page. I'm using xhtml2pdf.
views.py file
from io import BytesIO
from django.http import HttpResponse
from django.template.loader import get_template
from django.views import View
from xhtml2pdf import pisa
def render_to_pdf(template_src, context_dict={}):
template = get_template(template_src)
html = template.render(context_dict)
result = BytesIO()
pdf = pisa.pisaDocument(BytesIO(html.encode("utf-8")), result)
if not pdf.err:
return HttpResponse(result.getvalue(), content_type='application/pdf')
return None
data = {
"company": "Name",
}
#Opens up page as PDF
class ViewPDF(View):
def get(self, request, *args, **kwargs):
pdf = render_to_pdf('listings/listing.html', data)
return HttpResponse(pdf, content_type='application/pdf')
urls.py file
path('pdf_view/', views.ViewPDF.as_view(), name="pdf_view"),
html file
<section class="p0">
<div class="container">
<div class="row listing_single_row">
<div class="col-sm-6 col-lg-7 col-xl-8">
<div class="single_property_title">
<span class="flaticon-photo-camera"></span> View Photos
</div>
</div>
<div class="col-sm-6 col-lg-5 col-xl-4">
<div class="single_property_social_share">
<div class="spss style2 mt10 text-right tal-400">
<ul class="mb0">
<li class="list-inline-item"><span class="flaticon-transfer-1"></span></li>
<li class="list-inline-item"><span class="flaticon-heart"></span></li>
<li class="list-inline-item"><span class="flaticon-share"></span></li>
<li class="list-inline-item"><span class="flaticon-printer"></span></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
Thank you!
Ans 1.) If you want to style your html than directly use style property in tag. If you make class and use template inheritance than it is not going to work as it is independent html. Use style directly in html.
Ans 2.) if you want specific section of html in pdf than write content which you need in html or use style = “display: none ;” on section which you dont want in pdf.
Hi there I want to know why it is throwing a warning on the console
Warning: Unknown prop `iconCLassNameRight` on <div> tag. Remove this prop from the element. For details, see link fb me
in div (created by Paper)
in Paper (created by AppBar)
in AppBar (created by App)
in div (created by App)
in MuiThemeProvider (created by App)
in App
The is the code I am working on it is on meteorjs and material ui
import React, { Component } from 'react';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import RaisedButton from 'material-ui/RaisedButton';
import AppBar from 'material-ui/AppBar';
import Player from './Player.jsx';
import TeamList from './Team-list.jsx';
import TeamStats from './Team-stats.jsx';
export default class App extends Component {
render(){
return (
<MuiThemeProvider>
<div className="container">
<AppBar
title="Soccer Application" iconCLassNameRight="muidocs-icon-navigation-expand-more" showMenuIconButton={false} />
<div className="row">
<div className="col s12 m7"> <Player /> </div>
<div className="col s12 m5"> <TeamStats /> </div>
<div className="col s12 m5"> <TeamList /> </div>
</div>
</div>
</MuiThemeProvider>
)
}
}
I want to know why this is throwing an error. The line of interest is in the appbar component iconClassNameRight property. Any help would be greatly appreaciated. Thank you.
Props in React are case-sensitive.
Try replacing iconCLassNameRight (uppercase L) to iconClassNameRight (lowercase L)