Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to add icon to addButton? #1403

Closed
Thatoo opened this issue Jul 27, 2024 · 3 comments
Closed

How to add icon to addButton? #1403

Thatoo opened this issue Jul 27, 2024 · 3 comments

Comments

@Thatoo
Copy link

Thatoo commented Jul 27, 2024

Hello,

Here is an extract from my code (full code available here : https://github.com/Thatoo/picker/blob/one_page/src/main.js ) :

import EyeIcon from '@mdi/svg/svg/eye.svg?raw'
import PencilIcon from '@mdi/svg/svg/pencil.svg?raw'
import InternalIcon from 'vue-material-design-icons/OpenInNew.vue'


function openFilePickerClipboard() {
	const filePicker = getFilePickerBuilder(t('picker', 'Choose a file you want to copy a link from'))
		.setMultiSelect(false)
		.allowDirectories(true)
		.addButton({
			label: t('picker', 'Copy Read Only public link'),
			callback: (nodes) => {
				const target = nodes[0]
				const targetPath = target.path
				const permission = 'read'
				createPublicLink(targetPath, permission, 'copy')
			},
			type: 'primary',
			icon: EyeIcon,
		})
		.addButton({
			label: t('picker', 'Copy Editable public link'),
			callback: (nodes) => {
				const target = nodes[0]
				const targetPath = target.path
				const permission = 'write'
				createPublicLink(targetPath, permission, 'copy')
			},
			type: 'primary',
			icon: PencilIcon,
		})
		.addButton({
			label: t('picker', 'Copy Internal link'),
			callback: (nodes) => {
				const target = nodes[0]
				const targetId = target.fileid
				copyInternalLink(targetId)
			},
			type: 'success',
			icon: InternalIcon,
		})
		.build()
	filePicker.pick()
}

It builds but none of the three icons are displayed when loading the page :

image

@Thatoo
Copy link
Author

Thatoo commented Jul 28, 2024

I tried to import svg like that also but it didn't help :

import EyeIcon from '../img/eye.svg'
import '../img/pencil.svg?raw'
import '../img/open-in-new.svg'

@Thatoo
Copy link
Author

Thatoo commented Aug 20, 2024

So,
this works
import EyeIcon from '@mdi/svg/svg/eye.svg?raw'
but it requires to add something like

const webpackConfig = require(' Nextcloud /webpack-vue-config')
webpackConfig.module.rules.push({
    resourceQuery: /raw/,
    type: 'asset/source',
})

in the webpack.config.js or webpack.js file. Source : https://github.com/nextcloud-libraries/webpack-vue-config/tree/main?tab=readme-ov-file#replaceedit-existing-rule

@Thatoo Thatoo closed this as completed Aug 20, 2024
@Thatoo
Copy link
Author

Thatoo commented Aug 20, 2024

screenshot-2024-08-20-12-38-19

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant