I am using yarn fluentui/react-northstar and i need to add custom icon using svg as this https://fluentsite.z22.web.core.windows.net/0.53.0/icon-viewer.
is there proper way or guideline to do add custom icons?
Have you seen this blog post? https://medium.com/swlh/fluentui-react-how-we-cut-more-than-30-of-components-bundle-size-by-creating-icons-package-474019d3123
It implies that this snippet creates a new SVG icon.
import { createSvgIcon } from "#fluentui/react-northstar";
const RobotIcon = createSvgIcon({
svg: ({ classes, props }) => (
<svg viewBox="0 0 16 16" className={classes.svg}>{...}</svg>
),
displayName: 'RobotIcon',
});
I haven't test it though, as I am currently looking to do the same with a gif image.
Related
I am trying to use kristerkari/react-native-svg-transformer, but I get following error after I run the metro:
error: assets/menu.svg: /user/Projects/mobile/assets/menu.svg: Namespace tags are not supported by default. React's JSX doesn't support namespace tags. You can set `throwIfNamespace: false` to bypass this warning.
2 | import Svg, { Path } from "react-native-svg";
3 |
> 4 | const SvgComponent = props => <Svg overflow="visible" preserveAspectRatio="none" viewBox="0 0 24 24" width={24} height={24} {...props}><Path xmlns:default="http://www.w3.org/2000/svg" d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" vectorEffect="non-scaling-stroke" fill="#949494" /></Svg>;
| ^^^^^^^^^^^^^
5 |
6 | export default SvgComponent;
I followed the instructions. I am using React 16.13.1 and RN 0.63.2. I tried to set the flag in babel.config.js like this:
module.exports = {
presets: [
'module:metro-react-native-babel-preset',
{ throwIfNamespace: false },
],
};
but it's not working. Any idea how can I bypass the warning or maybe alternative way to be able to import a SVG file without runtime conversion?
I've encountered the same problem in past, not sure if it's the correct solution but removing the xmlns in the svg file worked for me
Can you use path Svg by The same package whitout transformer svg but you must link with React native.
react-native link react-native-svg-transformer
The error is because of not using camel case tags. Please note that here you are using jsx (react). So please make the following changes.
sketch:type into sketchType
xmlns:xlink into xmlnsXlink
xlink:href into xlinkHref
xmlns:default into xmlnsDefault
And finally convert any css classes also into camelCase
Is it possible to customize core Spartacus components like cx-icon? I need to extend cx-icon to add functionality to support Material Icons, so whenever I use cx-icon in the app, Material Icons are rendered and not FontAwesome icons
PS - Material icons cannot be configured in cx-icon as it doesn't use CSS classes like FontAwesome, rather it uses text ligatures
I'm not sure, but you can try to figure it out with SVG sprite. You just need to download Material Icons in SVG sprite format (more details here https://google.github.io/material-design-icons/) and to configure IconModule with custom matIconConfig like this (more details here https://sap.github.io/spartacus-docs/icon-library/):
export const matIconConfig: IconConfig = {
icon: {
symbols: {
INFO: 'info', // Here you should add actual xlink to SVS symbol
},
resources: [
{
type: IconResourceType.SVG,
url: './assets/mat-icons.svg',
types: [ICON_TYPE.INFO],
},
],
},
};
And then merge it to global configuration by:
ConfigModule.withConfig(matIconConfig);
Of course, during debugging, maybe you will need to apply some additional styles, but I can't provide which exactly.
I'm using Owl Carousel for Vue. It doesn't seem to work properly since all carousel items are visible in their global container, which is several screens wide (there's no overflow: hidden or any max-width to make only x items visible at a time).
Anyway I find myself forced to apply some container class to a wrapper that the plugin generates dynamically. To that end I do:
mounted () {
this.$nextTick(() => {
document.querySelector('.owl-carousel').classList.add('container')
})
}
But, querySelector('.owl-carousel') is null although I see it in the DOM.
How can I successfully select it?
wow a jquery plugin wrapped into vue ... with like 200 lines of props ...
props start here: L23
props end here : L220
but honestly just add your class here:
<div :id="elementHandle" :class="['owl-carousel', 'owl-theme', 'your-class-here']">
fork it
customize it
npm install <git repo url>
I am using vue-svg-loader to use my svg files as a component in Vue project. When I am rendering those svgs I am losing default css properties that are inside of the svg file. I can add those css properties inside of my component where I am rendering svg files, but that kind of violates the idea of reusable components since each svg file has its own property. Is there a way to inherit their css?
'''
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
viewBox="0 0 612 792" style="enable-background:new 0 0 612 792;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;}
.st1{fill:none;}
.st2{fill:#FFFFFF;stroke:#000000;stroke-width:2;stroke-miterlimit:10;stroke-dasharray:10;}
.st3{font-family:'ArialMT';}
.st4{font-size:32px;}
</style>
<font horiz-adv-x="2048">
'''
Likely what is happening is that all of your SVG files use the same class names (st0, st1, etc). They are overriding each other. You'll need to:
manually rename the classes in each file, so they use different names, or
That file looks like it came from Illustrator. Assuming they all did, then load the SVGs back into Illustrator, and re-export them. This time change which method AI uses to set the element styles. I don't have AI handy right now, but there will probably be three options (I don't recall exactly what they are called):
Internal CSS - what the file above is using
Style attributes - uses the style="..." attrinbute
Attributes - uses attributes like fill="#ff0000"
If you need to style the SVGs with CSS in your page, you'll probably want to use the last option. That's because style attributes have a higher priority than CSS, so you would need to use the CSS !important flag, which is not generally recommended.
I've found that the vue-svg-loader documentation is pretty thin, mainly because all its configuration is done via the svgo library. There are some clues in this FAQ, which shows you how to customise the svgo configuration in your webpack config.
So maybe you want something like this in your vue.config.js file:
module.exports = {
chainWebpack: (config) => {
const svgRule = config.module.rule('svg');
svgRule.uses.clear();
svgRule
.use('babel-loader')
.loader('babel-loader')
.end()
.use('vue-svg-loader')
.loader('vue-svg-loader')
.options({
svgo: {
plugins: [
addClassesToSVGElement: {
classNames: ["foo", "bar"],
}
],
},
});
},
};
<v-img :src="getPhoto()" height="200px" width="200px"></v-img>
this is for photo to load from getphot function. the src has the url for facebook but vuetify doesnt load anything
computed: {
user () {
return this.$store.getters.user
}
},
methods: {
getPhoto () {
return this.$store.getters.user.photoUrl
}
}
i do not get any error. and when i use the link i can access the image. because i have logged in from my device.
note: i am using firebase for all of these
Try
<v-img :src="require('getPhoto()')" height="200px" width="200px"></v-img>
instead of
<v-img :src="getPhoto()" height="200px" width="200px"></v-img>
Vue loader converts relative paths into require functions automatically for you. Unfortunately, this is not the case when it comes to custom components. You can circumvent this issue by using require. If you're using Vuetify as a Vue-CLI 3 plugin, you can edit your project's vue.config.js file by modifying the options for vue-loader.
// Incorrect
<v-img src="../path/to/img" />
// Correct
<v-img :src="require('../path/to/img')" />
Source: Vuetify
Update: When not using a relative path, I tried creating an example when using a function to get the URL for the image source. I think there are two problems with your code:
Remove the () from getPhoto() in <v-img>
Add the getPhoto() to the computed property.
Here is a Codepen
I hope it helps.