icons 相关问题

我正在使用 Angular 独立组件，ionic 版本是 7.1.1 / Angular 版本：17.0.8。这是 HTML： {{姓名}} 我正在使用 Angular 独立组件，ionic 版本是 7.1.1 / Angular 版本：17.0.8。这是 html: <div id="container"> <strong>{{ name }}</strong> <div class="icon-container"> <p>Windows Shop</p> <div class="win-icon"> <ion-icon name="logo-windows"></ion-icon> </div> </div> </div> 这是 ts 类： import { Component, Input } from '@angular/core'; import { IonIcon } from '@ionic/angular/standalone'; import { CommonModule } from '@angular/common'; import {logoWindows} from 'ionicons/icons'; @Component({ selector: 'app-explore-container', templateUrl: './explore-container.component.html', styleUrls: ['./explore-container.component.scss'], imports: [IonIcon], standalone: true, }) export class ExploreContainerComponent { @Input() name?: string; constructor(){ addIcons:{{logoWindows}} } } 如上所述，离子图标未显示，这是浏览器控制台中的错误： index.js:32 Uncaught TypeError: Failed to construct 'URL': Invalid base URL at getAssetPath (index.js:32:22) at getNamedUrl (icon.js:46:22) at getUrl (icon.js:27:12) at Icon.loadIcon (icon.js:296:25) at icon.js:257:18 at Icon.waitUntilVisible (icon.js:291:13) at Icon.connectedCallback (icon.js:255:14) at Icon.connectedCallback (index.js:3390:43) at DefaultDomRenderer2.insertBefore (platform-browser.mjs:563:26) at nativeInsertBefore (core.mjs:8495:14) index.js:32 Uncaught TypeError: Failed to construct 'URL': Invalid base URL at getAssetPath (index.js:32:22) at getNamedUrl (icon.js:46:22) at getUrl (icon.js:27:12) at Icon.loadIcon (icon.js:296:25) at icon.js:257:18 at Icon.waitUntilVisible (icon.js:291:13) at Icon.connectedCallback (icon.js:255:14) at Icon.connectedCallback (index.js:3390:43) at StackController.transition (ionic-angular-common.mjs:1351:29) at ionic-angular-common.mjs:1242:29 src_app_tab1_tab1_page_ts.js:2 TypeError: Failed to construct 'URL': Invalid base URL at getAssetPath (index.js:32:22) at getNamedUrl (icon.js:46:22) at getUrl (icon.js:27:12) at Icon.loadIcon (icon.js:296:25) at Icon.componentDidLoad (icon.js:268:18) at safeCall (index.js:2389:36) at postUpdateComponent (index.js:2299:13) at index.js:2207:9 at Generator.next (<anonymous>) at asyncGeneratorStep (asyncToGenerator.js:3:1) undefined 顺便说一下，我尝试使用以下命令安装最新的 ionic 版本： npm install -g @ionic/cli@latest 但它保留了当前版本：7.1.1 你有什么建议？要使用离子图标，您必须单独导入它们：例如： import { IonIcon } from '@ionic/angular/standalone'; import { addIcons } from 'ionicons'; // Import this import { cameraOutline } from 'ionicons/icons'; @Component({ selector: 'app-youcomponent', templateUrl: 'youcomponent.component.html', styleUrls: ['youcomponent.component.scss'], standalone: true, imports: [ IonIcon ] }) export class Youcomponent { constructor(){ addIcons({ cameraOutline }); // you are missing addIcons Import } } 您需要添加所有图标，例如： app.component.html <ion-icon name="add"></ion-icon> app.component.ts import { Component } from '@angular/core'; import { IonHeader, IonToolbar, IonTitle, IonContent, IonIcon } from '@ionic/angular/standalone'; import {addIcons} from 'ionicons'; import {add} from 'ionicons/icons'; @Component({ selector: 'app-root', templateUrl: 'app.component.html', standalone: true, imports: [IonHeader, IonToolbar, IonTitle, IonContent, IonIcon], })`enter code here` export class AppComponent { constructor() {addIcons({add});} <--this need write all icons what you need } 我在 Angular 17、Ionic 7 和独立版上也遇到了同样的问题。尽管使用了 Ionic 框架，但图标没有显示。我使用了 Юлія Гороховацька 的解决方案（非常感谢 Julia），它工作正常，但如果您的导入中已经有 IonicModule，则不需要在那里添加 IonIcon。如果这样做，您将在控制台中收到错误：错误错误：NG0300：多个组件与标记名离子图标匹配节点：IonIcon 和 IonIcon。（也可能在您的 IDE 中）。 import {addIcons} from 'ionicons'; import {removeCircle} from 'ionicons/icons'; @Component({ selector: 'app-thingy', templateUrl: './thingy.page.html', styleUrls: ['./thingy.page.scss'], standalone: true, imports: [IonicModule] }) export class ProductsPage implements OnInit { constructor() { addIcons({removeCircle}); // I needed the remove-circle icon, // please note that this uses string literals so rmeove the dash and capitalize the next letter } 我添加这个答案，以防像我这样的另一个初学者发现这个，节省几分钟。我会发表评论而不是添加答案，但我没有足够的积分来这样做。 ^^'

angular ionic-framework icons

回答 3 投票 0

Python - 动态创建带有图像的按钮时遇到问题

我对 Python 非常陌生（我的自学之旅才几周），我遇到了困难。目标：要拥有一个能够读取运行脚本的文件夹中的文件的脚本，动态...

python tkinter icons dynamically-generated shortcut-file

回答 1 投票 0

Ant Design 中如何设置图标大小？

所以当我在 Ant Design 中使用图标时，它始终是 14 * 14 px。有没有办法手动设置尺寸？像或者所以当我在 Ant Design 中使用图标时，它始终是 14 * 14 px。有没有办法手动设置尺寸？类似的事情 <Icon width={"20px"} type="setting" /> 或 <Icon style={{width: '20em'}} type="setting" /> 不工作应该是 <Icon type="message" style={{ fontSize: '16px', color: '#08c' }} theme="outlined" /> https://codepen.io/anon/pen/wNgrWX 可以使用 fontSize 样式属性更改图标的大小。例如：使用 style={{ fontSize: '150%'}} <PlayCircleFilled style={{ fontSize: '150%'}} /> 在新的 antd Icon 版本中，你可以像这样增加图标的大小： import { MessageTwoTone } from "@ant-design/icons"; 并称其为： <div style={{ fontSize: "30px" }}> <MessageTwoTone /> </div> 我尝试使用它作为 <MessageTwoTone> 的属性，但属性不再像上面答案中提到的旧版本那样工作。编辑：- 后来我被告知，上述内容仅在图标从其父级继承其字体大小时才有效。所以我们应该直接给 Icon 添加 style 属性 <MessageTwoTone style={{ fontSize: "30px" }}/> 不确定它是否只适合我，但截至今天，接受的答案不起作用，我通过在图标组件中放置一个 className 并针对该类的 svg 使其起作用。这是一个例子组件.js import { CheckCircleTwoTone } from '@ant-design/icons'; <CheckCircleTwoTone twoToneColor="#52c41a" className="reg_icon" /> 组件.scss .reg_icon { svg { font-size: 120px !important; } } 使用<Icon style={{ fontSize: '30px'}} type="check-circle" /> 这是一个可用的代码笔： https://codesandbox.io/s/x7r7k7j6xw 如果像这样使用按钮内的图标： <Button type="text" icon={<GithubOutlined />} /> 您可以添加这些类/样式，它将为您解决问题（它为我解决了） <Button type="text" className={styles.button} icon={<GithubOutlined className={styles.icon}/>} /> .button { // The wanted size... font-size: 2.5em; // Without it, changing the font size will cause problems. width: fit-content; height: fit-content; .icon { font-size: inherit; } } CodePen 演示虽然这里的许多解决方案给出了正确的答案，但我想解释一下为什么它会这样工作。解决方案正如其他答案所述，您需要更改字体大小，如下所示： <Icon style={{ fontSize: '20em' }} type="setting" /> 为什么这有效？如果您检查 ant design 渲染的 svg，您会发现它使用 em 单位，而不是以像素为单位设置宽度和高度。 em 单位是相对单位，相对于父级的字体大小。因此，如果父级的字体大小为 16px，则为 1em = 16px、2em = 32px 等等。由于 ant design 将宽度和高度设置为 1em，因此 svg 的宽度和高度将是父级的字体大小 - 在这种情况下，ant design 包装其的 span 的字体大小图标与. 为什么他们不只使用像素？由于我没有参与开发过程，所以无法给你明确的答案，但我有两种理论。由于图标是方形的并且宽度和高度相等，因此这样做将允许用户同时设置宽度和高度，而无需显式定义宽度和高度。由于图标是用跨度包裹的，因此您需要能够使用 css 选择器来更改 svg 组件的宽度和高度。当使用内联样式时，这通常是不可能的。将宽度和高度设置为 em 单位允许用户更改 svg 的大小，而无需使用 css 选择器。使用 javascript 实现此操作的最佳方法 Icon.setTwoToneColor("#000");

javascript html reactjs icons ant-design-pro

回答 8 投票 0

如何使用默认的iOS图片？

我知道如何在iOS应用程序中使用图像。但我不知道如何使用开发人员网站中提到的默认图像，例如共享或书签图标。我想使用它们。需要下载吗...

ios7 icons

回答 6 投票 0

将图标徽标置于圆圈中心？

screenshot#代码在CodePen中是完美的，我在firfox或chrome中运行时出现这个问题。我用“行高”在“浏览器检查”中修复了它，但是当我在

html css icons contacts footer

回答 1 投票 0

如何更改搜索视图图标颜色？

我知道这里已经有很多这个问题的答案，如果我还没有尝试过我在这里看到的所有内容，我就不会创建另一个线程。无论如何，问题很简单。我...