search

vscode-elements / elements

Web component library for developing Visual Studio Code extensions
https://vscode-elements.github.io
MIT License
156 stars 27 forks source link

Using vscode-icon and button with codicon icons with React #119

Closed BDOXHN closed 9 months ago

BDOXHN commented 11 months ago

Good day! Thank you for your webkit, it is really powerfull! I tried to use vscode icon in my react webview project, but it doesnt work :( What I already tried to do: 1) Downloaded only codicon css and import in my React Component likie import './styles/codeicon.css', but it doesnt work 2) Installed codeicon from npm https://www.npmjs.com/package/@vscode/codicons, imported codeicon css from dist library, ut it doesnt work When i try to use this code (from @vscode/codicons examples) <div class="icon"><i class="codicon codicon-arrow-left"></i></div> icons works, but it doesnt with your package

Do you have any example of how to use vscode-icon with react?

my settings rn: 1) global.d.ts `import { Children, DOMAttributes } from 'react'; import { VscodeBadge, VscodeButton, VscodeCheckbox, VscodeCheckboxGroup, VscodeCollapsible, VscodeContextMenu, VscodeContextMenuItem, VscodeFormContainer, VscodeFormGroup, VscodeFormHelper, VscodeIcon, VscodeLabel, VscodeMultiSelect, VscodeOption, VscodeRadio, VscodeRadioGroup, VscodeScrollable, VscodeSingleSelect, VscodeSplitLayout, VscodeTabHeader, VscodeTable, VscodeTableBody, VscodeTableCell, VscodeTableHeader, VscodeTableHeaderCell, VscodeTableRow, VscodeTabPanel, VscodeTabs, VscodeTextarea, VscodeTextfield, VscodeTree, } from '@bendera/vscode-webview-elements';

type CustomElement = Partial<T & DOMAttributes & { children: Children }>;

declare global { namespace React.JSX { interface IntrinsicElements {

        ['vscode-button']: CustomElement<VscodeButton>;
        ['vscode-checkbox']: CustomElement<VscodeCheckbox>;
        ['vscode-checkbox-group']: CustomElement<VscodeCheckboxGroup>;
        ['vscode-collapsible']: CustomElement<VscodeCollapsible>;
        ['vscode-context-menu']: CustomElement<VscodeContextMenu>;
        ['vscode-context-menu-item']: CustomElement<VscodeContextMenuItem>;
        ['vscode-form-container']: CustomElement<VscodeFormContainer>;
        ['vscode-form-group']: CustomElement<VscodeFormGroup>;
        ['vscode-form-helper']: CustomElement<VscodeFormHelper>;
        ['vscode-icon']: CustomElement<VscodeIcon>;
        ['vscode-label']: CustomElement<VscodeLabel>;
        ['vscode-multi-select']: CustomElement<VscodeMultiSelect>;
        ['vscode-option']: CustomElement<VscodeOption>;
        ['vscode-radio']: CustomElement<VscodeRadio>;
        ['vscode-radio-group']: CustomElement<VscodeRadioGroup>;
        ['vscode-scrollable']: CustomElement<VscodeScrollable>;
        ['vscode-single-select']: CustomElement<VscodeSingleSelect>;
        ['vscode-split-layout']: CustomElement<VscodeSplitLayout>;
        ['vscode-tab-header']: CustomElement<VscodeTabHeader>;
        ['vscode-tab-panel']: CustomElement<VscodeTabPanel>;
        ['vscode-table']: CustomElement<VscodeTable>;
        ['vscode-table-body']: CustomElement<VscodeTableBody>;
        ['vscode-table-cell']: CustomElement<VscodeTableCell>;
        ['vscode-table-header']: CustomElement<VscodeTableHeader>;
        ['vscode-table-header-cell']: CustomElement<VscodeTableHeaderCell>;
        ['vscode-table-row']: CustomElement<VscodeTableRow>;
        ['vscode-tabs']: CustomElement<VscodeTabs>;
        ['vscode-textarea']: CustomElement<VscodeTextarea>;
        ['vscode-textfield']: CustomElement<VscodeTextfield>;
        ['vscode-tree']: CustomElement<VscodeTree>;
    }
}

} `

how i use it import '@bendera/vscode-webview-elements/dist/vscode-button/index.js'; <vscode-button icon="play" secondary className="flex flex-row justify-end gap-1">

image

bendera commented 11 months ago

Hi,

Is this link tag included in your HTML?

<link rel="stylesheet" href="path/to/codicon.css" id="vscode-codicon-stylesheet" />
bendera commented 11 months ago

One more thing came to my mind. Maybe your CSP settings are set incorrectly. Check this example: https://github.com/vscode-elements/vscode-vscwe-demo/blob/master/src/extension.ts