I have en issue with angular and font awesome. On first generation of list of icons suddenly all css class based icons are translated to svg. It affects only solid icons. for example :
<i class="fas fa-2x fa-minus-square"></i>
is translated somehow to
<svg _ngcontent-c16="" class="svg-inline--fa fa-minus-square fa-w-14 fa-2x"
ng-reflect-ng-class="fas fa-2x fa-minus-square" aria-hidden="true" data-prefix="fas" data-icon="minus-square"
role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg="">
<path fill="currentColor"
d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zM92 296c-6.6 0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h264c6.6 0 12 5.4 12 12v56c0 6.6-5.4 12-12 12H92z">
</path>
</svg>
<!-- <i _ngcontent-c16="" class="fas fa-2x fa-minus-square" ng-reflect-ng-class="fas fa-2x fa-minus-square"></i> -->
Is there any option which can prevent this situation? Force somehow translation?
It can be problematic. For example I cannot use solid icons :(
If you'd like Font Awesome not to automatically replace <i> tags that look like icons with the corresponding <svg>s, you could change the configuration to disable autoReplaceSvg.
If you're loading via <script> tag, that might look like this (make sure to do the config before loading Font Awesome):
<head>
<script type="text/javascript">
// Notice how this gets configured before we load Font Awesome
window.FontAwesomeConfig = { autoReplaceSvg: false }
</script>
<script src="fontawesome.js"></script>
<script src="fa-solid.js"></script>
</head>
Or if you're building your own bundle and can access the config from within your own script you could do this:
import fontawesome from '#fortawesome/fontawesome'
fontawesome.config = { autoReplaceSvg: false }
I had the same issue, the icon tag was actually translated to SVG when I inspected the element.
The problem was I was loading fontawesome both via CSS and JS calls. When I removed the call to the JS lib and only called the CSS file, the icons rendered properly.
Related
I'm new to Vue js (I'm using vue3) and I've detected a bit weird behavior at my Component while image rendering
I have a project with 2 endpoints Home.vue and InitializationModal.vue
The Problem is, that while rendering the InitializationModal.vue component, the vue does not determine the require as a function for some reason (I put the template into the template attribute of the component, not into the separated tag)
I have the same template at Home.vue (but it is in separated template tag), however it works perfect.
What's wrong with it?
To better explain the problem, there is some snippets provided down below
I've cut it as much as it possible to make it easier to understand
Snippet of the Home.vue (that is in separated tag)
<template>
<div v-else class="empty flex flex-column">
<img :src="require('#/assets/illustration-empty.svg')" style="width: 50%; height: 50%; margin" alt="illustration-empty" />
<h3>There is nothing here</h3>
<p>Let's create a new Virtual Server Now!</p>
</div>
</div>
</template>
<script>
...// my component goes there
</script>
InitializationModal.vue
<script>
export default {
name: "hardwareConfiguration",
template: `
<div class="hardwareConfiguration flex flex-column">
<h4>Hardware Configuration</h4>
<v-select :options="Datacenters" #input="validateDatacenter" label="title">
<template slot="Datacenter" slot-scope="Datacenter">
<img :src="require('#/assets/some_image.svg')" style="height: 20%; width: 20%" />
{{ Datacenter.DatacenterName }}
</template>
</v-select>
`,
};
</script>
the Error that is being returned at the InitializationModal.vue : Uncaught (in promise) TypeError: require is not a function
Using require( like this is not really Vue, it's Webpack which reads your require method, transforms the path to an absolute path which the browser understands (or possibly a base64 encoded string, depending on url-loader settings). The problem is webpack will only transform Javascript, not the full string of your template property. Maybe try like this:
`<img :src="${require('#/assets/some_image.svg')}" style="height: 20%; width: 20%" />`
or just use regular SFC template syntax.
I think I have a rather simple question, but I can't wrap my head around this problem.
Reproduction:
Localhost: I made an error.vue in the layouts folder, as mentioned by Nuxt in their docs. When I go to localhost/this-is-a-404, the error.vue file is showing as expected!
screenshot from the localhost
Live server: When I upload my dist (ssr) via FTP, everythings works fine except the error.vue page. Is has no styling and I think it's the default error page for any page.
screenshot from the live server:
error.vue
<template>
<div class="hero alternate b-white">
<div class="container">
<section class="columns hero-top">
<div class="column is-7 is-offset-1">
<svg xmlns="http://www.w3.org/2000/svg" width="90" height="90" fill="#DBE1EC" viewBox="0 0 48 48" id="error-icon">
<path d="M22 30h4v4h-4zm0-16h4v12h-4zm1.99-10C12.94 4 4 12.95 4 24s8.94 20 19.99 20S44 35.05 44 24 35.04 4 23.99 4zM24 40c-8.84 0-16-7.16-16-16S15.16 8 24 8s16 7.16 16 16-7.16 16-16 16z" />
</svg>
<h1 class="basic-padding-bottom-small" v-if="error.statusCode === 404">Ooops... <br>Deze pagina bestaat niet!</h1>
<h1 v-else>Ooops... <br> er ging iets fout!</h1>
<div class="button-group ">
<nuxt-link to="/" class="button smoke">
Terug naar home
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="feather feather-chevron-right">
<polyline points="9 18 15 12 9 6"></polyline>
</svg>
</nuxt-link>
</div>
</div>
</section>
</div>
</div>
</template>
<script>
export default {
name: 'NuxtError',
props: {
error: {
type: Object,
default: null
}
},
computed: {
statusCode() {
return (this.error && this.error.statusCode) || 500
},
message() {
return this.error.message || '<%= messages.client_error %>'
}
},
head() {
return {
title: this.message,
meta: [{
name: 'viewport',
content: 'width=device-width,initial-scale=1.0,minimum-scale=1.0'
}]
}
}
}
</script>
<style lang="scss">
#import "assets/scss/app.scss";
#error-icon{
margin-bottom: 40px;
}
</style>
Am I missing something?
Thanks in advance!
Aaron
Try adding the following to your nuxt.config.js:
generate: {
fallback: true
}
Here's the nuxt explanation about that in the how to deploy on Netlify page. Even though you're not deploying on Netlify, the issue could be the same.
For a single page app there is a problem with refresh as by default on netlify the site redirects to "404 not found". For any pages that are not generated they will fallback to SPA mode and then if you refresh or share that link you will get Netlify's 404 page. This is because the pages that are not generated don't actually exist as they are actually a single page application so if you refesh this page you will get a 404 because the url for that page doesn't actually exist. By redirecting to the 404.html Nuxt will reload your page correctly in SPA fallback.
The easiest way to fix this is by adding a generate property in your nuxt.config and setting fallback: true. Then it will fallback to the generated 404.html when in SPA mode instead of Netlify's 404 page.
Also, I wouldn't upload my dist folder via FTP, as that would only get the generated stuff to your server. Anything dynamic won't be there.
I recommend having the entire app in the server, preferably with a version control (git). Also, if you have a pipeline built in place where you're always auto deploying a certain branch, it would make your life much easier.
I am not able to get the svg xlink:href work as a dynamic property in Nuxtjs(Vue). I am trying to use it like below
<svg class="icon phone-icon">
<use
v-bind="{ 'xlink:href': '../assets/sprite.svg#icon-download' }"
></use>
</svg>
How do I make it work?
Nuxt does not process any string value in any object to check if it is a link or not, Use require to find the public path of your SVG
<svg class="icon phone-icon">
<use
v-bind="{ 'xlink:href': require('../assets/sprite.svg') + '#icon-download' }"
></use>
</svg>
Also, take a look at SVG Sprite Module, this module creates a clean way to work with SVG icons
On NuxtJS 2 I had to do the following:
<svg class="icon">
<use v-bind="{ 'xlink:href': require('~/assets/sprite.svg') + '#icon-download' }"></use>
</svg>
without ~ it did not work.
I want to display tweets like card-columns in my page.
I am not able to use Masonry in my vue webpack template. i have used tried it through npm & CDN but not getting grid properly.
in main.js
import Tweet from 'vue-tweet-embed';
import Masonry from 'masonry-layout';
in html
<head>
//....
<script src="https://unpkg.com/masonry-layout#4/dist/masonry.pkgd.min.js"></script>
</head>
in template
<div class="grid">
<div class="grid-item" v-for="i in topics">
<Tweet class="" :id="i.tweets.quoted_status_id_str" :options="{ theme: 'light' }" error-message-class="text-center text-muted tweet_err"><div class="text-center text-muted card" style="margin-top:12px;min-width:30px;"><i class="ion-social-twitter"></i>Loading tweet...</div></Tweet>
</div>
</div>
I have used vue-masonry.
(We need to take care of redraw method this.$redrawVueMasonry(); on update or change.)
I am migrating some of dojo 1.6 code to dojo 1.8 and I could not get the layout to behave the same. So I stripped the code to bare minimum hoping to nail down the problem and ended up with 2 identical jsfiddles. I copied the code from one into another one... and yet one of them results in splitted dojo ContentPanes where the other one does not.
Example #1 (layout works): http://jsfiddle.net/mmlitvin/3onan361/17/
Example #2 (layout does not work): http://jsfiddle.net/mmlitvin/Lt0a2fhd/
HTML
<body class="claro">
<div data-dojo-type="dijit.layout.BorderContainer" id="mainBC">
<div data-dojo-type="dijit.layout.BorderContainer" id="splitBC" data-dojo-props="region:'center'">
<div data-dojo-type="dijit.layout.ContentPane" id="topPane" data-dojo-props="region:'top'">SQL Statement and details</div>
<div data-dojo-type="dijit.layout.ContentPane" id="leftPane" data-dojo-props="region:'center'">Left Pane</div>
<div data-dojo-type="dijit.layout.ContentPane" id="rightPane" data-dojo-props="region:'right',splitter:'true',minSize:1" style="width:50%;">Right Pane</div>
</div>
</div>
Javascript
debugger;
dojo.require('dojo.parser');
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.Dialog");
CSS
#mainBC {
height:600px;
}
#topPane {
height: 15px;
border:none;
padding:0px;
}
They are not identical. If you click on Fiddle Options in the left menu, you'll notice that the working JSFiddle contains djConfig="parseOnLoad:true" in the Framework <script> attribute while the other one does not.
JSFiddle documentation states the following about this attribute:
Framework <script> attribute:
An ability to add special attributes to the script tag loading the framework.
That would result with <script type="text/javascript" src="/js/lib/someframework.js" {attributes}></script>
This means that dojo/parser is not running when the page loads in your second JSFiddle. In your actual code, simply add the djConfig="parseOnLoad:true to your <script> tag.