在 Vaadin 8 中显示大图标

Question

某些版本的 Vaadin 提供了内置的 FontAwesome。后来 Vaadin 推出了自己的图标集。

如何在 Vaadin 8 中使用其中的任何一个？

随着对Vaadin Flow（Vaadin 10+）的新强调和Web Components 的重新实现，我无法找到任何有关如何使用Vaadin 8 兼容字体源的文档。

如何在我的 Vaadin 8 布局中方便地将一些大图标显示为小部件？

Answer 1

有一些关于 font icons 和 VaadinIcons 以及 creating your own font icons 的 8.x 文档。

使用它们就像new Button("Add", VaadinIcons.PLUS); 一样简单，但是您提到了一些关于一些大图标的事情，而这些图标在 AFAIK 中并不是开箱即用的。

但是，基于上面的文档，快速而肮脏的解决方案是使用标签和一些样式：

主题：

.big-icon .v-icon{
   font-size: 300px;
 }

代码：

public class Icon extends VerticalLayout {
    public Icon() {
        Label image = new Label();
        image.setContentMode(ContentMode.HTML);
        image.setValue(VaadinIcons.EYE.getHtml());
        image.addStyleName("big-icon");
        addComponent(image);
    }
}

结果：

---

显然您可以继续疯狂，并创建一个稍微灵活的自己的标签，不需要修改样式，并且可以在运行时更新。大致如下：

public class Icon extends Label {
    private static final String CONTENT = "<span class=\"v-icon v-icon-%s\" style=\"font-family: %s; color: %s; font-size: %spx;\">&#x%s;</span>";
    private Color color;
    private int size;
    private VaadinIcons icon;

    public Icon(VaadinIcons icon) {
        this(icon, Color.BLACK, 16);
    }

    public Icon(VaadinIcons icon, Color color, int size) {
        this.icon = icon;
        this.color = color;
        this.size = size;
        setContentMode(ContentMode.HTML);
        updateIcon();
    }

    public void setIcon(VaadinIcons icon) {
        this.icon = icon;
        updateIcon();
    }

    public void setSize(int size) {
        this.size = size;
        updateIcon();
    }

    private void updateIcon() {
        setValue(String.format(CONTENT,
                icon.name(),
                icon.getFontFamily(),
                color.name(),
                size,
                Integer.toHexString(icon.getCodepoint())));
    }

    public void setColor(Color color) {
        this.color = color;
    }

    public enum Color {
        BLACK, GREEN
    }
}

myLayout.addComponents(new Icon(VaadinIcons.PLUS), new Icon(VaadinIcons.INFO, Icon.Color.GREEN, 200)); 的结果是：

---

可能有更优雅的解决方案，但这是我头脑风暴的结果，因为到目前为止我还没有这样的需求。我总是使用带有按钮和标签的常规大小的图标。无论如何，希望这能让你开始。