Suppose you have the following scenario: there is an input box on the left and on the right there is a fontawesome icon.
The icon on the right simply has as name the same as the value of the input box.
This means that a user can type in the input element and have on the right a preview of the fontawesome icon.
But the problem that arises now is twofold
Not all icons exists. E.g. there is no icon with the random text 'skdfji'. or not all icons exists in each library (e.g. it does exist in FaSolid but not in FaLight).
The icon may exist but not all keystrokes in between result in a valid icon.
e.g. when I try the icon 'house' , I first enter 'h', then 'o', then 'u', then 's' which means that there are 4 mismatches of invalid icons and only on the final keystroke will a valid icon be found.
All of these steps results in the logger of fontawesome going wild.
Besides the annoying log, I would also simply like to know if the icon exists or not because in that way I can give some feedback to the user.
I also tried writing a method to know if the icon exists.
import { findIconDefinition, IconName, IconPrefix, SizeProp } from '#fortawesome/fontawesome-svg-core';
public iconExists(name: IconName, library: IconPrefix): boolean {
return !!findIconDefinition({ iconName: name, prefix: library });
}
...
otherMethod() {
if(findIconDefinition('house', 'fal') {
console.log('Found', 'house');
} else {
console.log('Not found', 'house');
}
}
But Fontawesome will ALWAYS return undefined. Even for existing icons.
Would there be someway to just know if it exists?
These are my dependencies
"#fortawesome/angular-fontawesome": "^0.12.1",
"#fortawesome/fontawesome-svg-core": "^6.2.1",
"#fortawesome/pro-duotone-svg-icons": "^6.2.1",
"#fortawesome/pro-light-svg-icons": "^6.2.1",
"#fortawesome/pro-regular-svg-icons": "^6.2.1",
"#fortawesome/pro-solid-svg-icons": "^6.2.1",
The reson findIconDefinition does not work is because angular-fontawesome does not use global icon library from the fontawesome-svg-core and no icons are ever registered there.
If you use icon library approach and register all icons in the library, you can inject the FaIconLibrary service to check whether icon is registered:
class AppComponent {
constructor(private iconLibrary: FaIconLibrary) {}
iconExists(name: IconName, prefix: IconPrefix): boolean {
return this.iconLibrary.getIconDefinition(prefix, name) != null;
}
}
If you use explicit reference approach, you can attempt to load the icon definition using a dynamic import:
class AppComponent {
private icon: IconDefinition | null = null;
constructor(private iconLibrary: FaIconLibrary) {}
tryLoadIcon(name: IconName, prefix: IconPrefix): boolean {
import(`#fortawesome/pro-${prefix}-svg-icons/${name}.js`)
.then((module) => {
this.icon = module[this.iconName];
})
.catch((err) => console.error('Icon does not exist'));
}
}
svg-sprite to generate icons in my project. But I have one problem with configuration. I want to change import path in scss file as I use separate task to compile scss. I ve set the the svg-sprite config something like this:
mode: {
view: { // Activate the «view» mode
bust: true,
dimensions: true,
sprite: '../../../icons.svg',
render: {
scss : {
dest : '_icons.scss',
}
}...
and when it builds and compile scss it try to import from
background: url("../../../icons-2ccc073d.svg") no-repeat;
but what I want is url to be '../imgs/icons-2ccc073d.svg
Any help?
Thx
Just change sprite to '../imgs/
I'm using CKEditor 5 in my angular 7 application. ClassicEditor by default shows the Insert Media button on the toolbar as highlighted in the below image.
On researching online I found we can disable particular options by using the removePlugins option in the editorConfig like below.
editor.component.ts
editorConfig = {
removePlugins: ['Image'],
placeholder: 'Type the content here!'
};
Above code is to not remove the Insert Media option but a different option to Insert Image. But it doesn't work. Even after using the above code I could still see Image insert option in my CK Editor.
I also couldn't find online what I need to provide in the removePlugins for disabling the Insert Media option to try if atleast that works. Any help will be appreciated.
Thanks in advance
Instead of removing specific buttons it is possible to set the default configuration of the CKEditor to show only the options which are required to us.
Adding below code to the constructor in your angular component.ts file will create a simple CKEditor with only those options mentioned in the items array. mediaEmbed is the name of the item responsible for displaying Insert Video option in the CKEditor which I've not mentioned in the items array to not display it in the CKEditor.
ClassicEditor.defaultConfig = {
toolbar: {
items: [
'heading',
'|',
'bold',
'italic',
'|',
'bulletedList',
'numberedList',
'|',
'insertTable',
'|',
'imageUpload',
'|',
'undo',
'redo'
]
},
image: {
toolbar: [
'imageStyle:full',
'imageStyle:side',
'|',
'imageTextAlternative'
]
},
table: {
contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells' ]
},
language: 'en'
};
Result after adding above code
Hopes this will help someone!
This definitely work
<script src="https://cdn.ckeditor.com/ckeditor5/23.1.0/classic/ckeditor.js"></script>
<script>
ClassicEditor
.create(document.querySelector('#editor'), {
removePlugins: ['CKFinderUploadAdapter', 'CKFinder', 'EasyImage', 'Image', 'ImageCaption', 'ImageStyle', 'ImageToolbar', 'ImageUpload', 'MediaEmbed'],
})
.catch( error => {
console.error( error );
} );
</script>
Try passing the config in an input.
It's very unintuitive, I know.
ClassicEditor
.create(document.querySelector(selector), {
removePlugins: ['CKFinderUploadAdapter', 'CKFinder', 'EasyImage', 'Image', 'ImageCaption', 'ImageStyle', 'ImageToolbar', 'ImageUpload', 'MediaEmbed'],
})
.catch(error => {
console.error(error);
});
You can get a list of all plugins available like this:
console.log(ClassicEditor.builtinPlugins.map(plugin => plugin.pluginName));
The first way to solve this problem
Go to node modules -> #ckeditor -> ckeditor-build-classic -> build ->ckeditor.js
Go or search for defaultConfig in ckeditor.js --- you will find out in the last few lines
Here remove the unwanted fields like table, media, etc
The second way to solve the problem
defaultConfig={toolbar:{items:["heading","|","bold","italic","link","bulletedList","numberedList","|","indent","outdent","|","imageUpload","blockQuote","insertTable","mediaEmbed","undo","redo"]},image:{toolbar:["imageStyle:full","imageStyle:side","|","imageTextAlternative"]},table:{contentToolbar:["tableColumn","tableRow","mergeTableCells"]},language:"en"}}]).default}
Here are the complete list:
Eg - remove the table from the Editor
defaultConfig={toolbar:{items:["heading","|","bold","italic","link","bulletedList","numberedList","|","indent","outdent","|","imageUpload","blockQuote","mediaEmbed","undo","redo"]},image:{toolbar:["imageStyle:full","imageStyle:side","|","imageTextAlternative"]},language:"en"}}]).default}
put in the constructor of the component.ts file
ClassicEditor.defaultConfig={toolbar:{items:["heading","|","bold","italic","link","bulletedList","numberedList","|","indent","outdent","|","imageUpload","blockQuote","mediaEmbed","undo","redo"]},image:{toolbar:["imageStyle:full","imageStyle:side","|","imageTextAlternative"]},language:"en"}}]).default}
I think you're on the right track. I was able to accomplish this by using the removePlugins config option. The key was making sure that the items in your removePlugins array match the item names in the default toolbar config.
const defaultToolbarItems = [
...,
'imageUpload',
'mediaEmbed',
...
];
const editorConfig = {
placeholder: 'Type the content here!',
removePlugins: ['imageUpload','mediaEmbed'],
}
I've created a component from the lottie-react-web package.
import React from 'react';
import Lottie from 'lottie-react-web'
import animation from '../../src/animations/anim.json'
const LottieAnim = () => (
<Lottie
options = {{
animationData: animation,
loop: false,
autoplay: true,
}}
width = "60px"
height = "60px"
/>
)
export default LottieAnim
This works and builds successfully. When the DOM loads it is generating the wrapper div with the attributes defined. However, the svg in the div does not have defined viewbox parameters, as well as undefined width and height, along with the containing vectors inside the svg.
Should be animationData: animationData.default
See: https://github.com/chenqingspring/vue-lottie/issues/20
Yeah, for TypeScript it's better to do
import { default as animationData } from '../animation-with-blackjack-and-hooks.json'
and then
const defaultOptions:Options = {
loop: true,
autoplay: true,
animationData: animationData,
rendererSettings: {
preserveAspectRatio: 'xMidYMid slice'
}
};
I am using sample.json image file which is for bodymovin animation in my page through Lottie for React Native.
I am getting the image but the image is not fully retrieved, some parts of the image is missing and also in some side of the image, green color pasted on the image.
But i checked the sample.json through online json image viewr. But there is no issue with the image from the source
here is issue https://i.stack.imgur.com/yFZfg.jpg
here is original image https://i.stack.imgur.com/4sBzg.jpg
so here is my code
import React from 'react';
import { Animated, Easing, easing } from 'react-native';
import Animation from 'lottie-react-native';
export default class BasicExample extends React.Component {
constructor(props) {
super(props);
this.state = {
progress: new Animated.Value(0.5),
};
}
componentDidMount() {
this.startAnimation();
}
startAnimation() {
Animated.timing(
this.state.progress,
{
toValue: 1,
from: 0,
to: 1,
duration: 5000,
}
)
.start(() => {
// Restart at end
this.state.progress.setValue(0);
this.startAnimation();
});
}
render() {
const easing = Easing.inOut(Easing.quad);
const { Animate } = this.props;
return (
<Animation
style={{
width: 300,
height: 300,
}}
source={this.props.Animate}
progress={this.state.progress}
/>
);
}
}
i installed lottie npm also.
so this is my issue please help me to overcome this
Thanks in advance
UPDATE: Now that I looked your code closer I found out that you're animating by changing the value of progress prop. That's not how to do it. You need to use ref for referring the animation to.
return (
<Animation
ref={(animation) => this.myAnimation = animation}
style={{
width: 300,
height: 300,
}}
source={this.props.Animate}
/>
);
And then:
componentDidMount() {
this.startAnimation();
}
startAnimation() {
this.myAnimation.play();
}
OLD ANSWER:
Your code seems perfectly legit and if you see an image, it proofs that you're doing it right.
I'd assume there's either something wrong with the JSON or then Lottie just interprets values wrong.
I've encountered small styling issues on Android devices, but not with iOS. And they're mostly related to alignment.
If you don't get any proper answers here in SO, I'd suggest you to file an issue to github (see this for instance: https://github.com/airbnb/lottie-react-native/issues/182)